@tanstack/query-devtools 5.83.1 → 5.84.0

package/build/chunk/{SNNOUPG2.js → YPM2AS64.js}

@@ -9466,23 +9466,26 @@ var _tmpl$132 = /* @__PURE__ */ template(`<span>Theme`);
 var _tmpl$142 = /* @__PURE__ */ template(`<span>Light`);
 var _tmpl$152 = /* @__PURE__ */ template(`<span>Dark`);
 var _tmpl$162 = /* @__PURE__ */ template(`<span>System`);
-var _tmpl$172 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
-var _tmpl$182 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
-var _tmpl$192 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter name=tsqd-query-filter-input></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
-var _tmpl$202 = /* @__PURE__ */ template(`<option>Sort by `);
-var _tmpl$212 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-var _tmpl$222 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
-var _tmpl$232 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-var _tmpl$242 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-var _tmpl$252 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$262 = /* @__PURE__ */ template(`<button><span></span><span>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<button><span></span> Error`);
-var _tmpl$28 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-var _tmpl$29 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
-var _tmpl$30 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
-var _tmpl$31 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
-var _tmpl$322 = /* @__PURE__ */ template(`<option>`);
-var _tmpl$332 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+var _tmpl$172 = /* @__PURE__ */ template(`<span>Disabled Queries`);
+var _tmpl$182 = /* @__PURE__ */ template(`<span>Show`);
+var _tmpl$192 = /* @__PURE__ */ template(`<span>Hide`);
+var _tmpl$202 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
+var _tmpl$222 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter name=tsqd-query-filter-input></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
+var _tmpl$232 = /* @__PURE__ */ template(`<option>Sort by `);
+var _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+var _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
+var _tmpl$262 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<button><span></span><span>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
+var _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+var _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
+var _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+var _tmpl$35 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
 var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
 var [selectedMutationId, setSelectedMutationId] = createSignal(null);
 var [panelWidth, setPanelWidth] = createSignal(0);
@@ -9897,9 +9900,12 @@ var ContentView = (props) => {
   const queryCount = createSubscribeToQueryCacheBatcher((queryCache) => {
     return queryCache().getAll().length;
   }, false);
-  const queries = createMemo(on(() => [queryCount(), props.localStore.filter, sort(), sortOrder()], () => {
+  const queries = createMemo(on(() => [queryCount(), props.localStore.filter, sort(), sortOrder(), props.localStore.hideDisabledQueries], () => {
     const curr = query_cache().getAll();
-    const filtered = props.localStore.filter ? curr.filter((item) => rankItem(item.queryHash, props.localStore.filter || "").passed) : [...curr];
+    let filtered = props.localStore.filter ? curr.filter((item) => rankItem(item.queryHash, props.localStore.filter || "").passed) : [...curr];
+    if (props.localStore.hideDisabledQueries === "true") {
+      filtered = filtered.filter((item) => !item.isDisabled());
+    }
     const sorted = sortFn() ? filtered.sort((a2, b2) => sortFn()(a2, b2) * sortOrder()) : filtered;
     return sorted;
   }));
@@ -9924,7 +9930,7 @@ var ContentView = (props) => {
     el.style.setProperty("--tsqd-font-size", variable);
   };
   return [(() => {
-    var _el$0 = _tmpl$192(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$1.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$22 = _el$19.nextSibling, _el$25 = _el$16.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
+    var _el$0 = _tmpl$222(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$1.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$22 = _el$19.nextSibling, _el$25 = _el$16.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
     var _ref$4 = containerRef;
     typeof _ref$4 === "function" ? use(_ref$4, _el$0) : containerRef = _el$0;
     _el$11.$$click = () => {
@@ -10014,10 +10020,10 @@ var ContentView = (props) => {
           props.setLocalStore("sort", e2.currentTarget.value);
         });
         insert(_el$20, () => Object.keys(sortFns).map((key) => (() => {
-          var _el$43 = _tmpl$202(); _el$43.firstChild;
-          _el$43.value = key;
-          insert(_el$43, key, null);
-          return _el$43;
+          var _el$46 = _tmpl$232(); _el$46.firstChild;
+          _el$46.value = key;
+          insert(_el$46, key, null);
+          return _el$46;
         })()));
         createRenderEffect(() => _el$20.value = sort());
         return _el$20;
@@ -10033,10 +10039,10 @@ var ContentView = (props) => {
           props.setLocalStore("mutationSort", e2.currentTarget.value);
         });
         insert(_el$21, () => Object.keys(mutationSortFns).map((key) => (() => {
-          var _el$45 = _tmpl$202(); _el$45.firstChild;
-          _el$45.value = key;
-          insert(_el$45, key, null);
-          return _el$45;
+          var _el$48 = _tmpl$232(); _el$48.firstChild;
+          _el$48.value = key;
+          insert(_el$48, key, null);
+          return _el$48;
         })()));
         createRenderEffect(() => _el$21.value = mutationSort());
         return _el$21;
@@ -10268,6 +10274,71 @@ var ContentView = (props) => {
                       }
                     })];
                   }
+                }), createComponent(dropdown_menu_exports.Sub, {
+                  overlap: true,
+                  gutter: 8,
+                  shift: -4,
+                  get children() {
+                    return [createComponent(dropdown_menu_exports.SubTrigger, {
+                      get ["class"]() {
+                        return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-disabled-queries");
+                      },
+                      get children() {
+                        return [_tmpl$172(), createComponent(ChevronDown, {})];
+                      }
+                    }), createComponent(dropdown_menu_exports.Portal, {
+                      ref: (el) => setComputedVariables(el),
+                      get mount() {
+                        return memo(() => !!pip().pipWindow)() ? pip().pipWindow.document.body : document.body;
+                      },
+                      get children() {
+                        return createComponent(dropdown_menu_exports.SubContent, {
+                          get ["class"]() {
+                            return clsx(styles().settingsMenu, "tsqd-settings-submenu");
+                          },
+                          get children() {
+                            return [createComponent(dropdown_menu_exports.Item, {
+                              onSelect: () => {
+                                props.setLocalStore("hideDisabledQueries", "false");
+                              },
+                              as: "button",
+                              get ["class"]() {
+                                return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries !== "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
+                              },
+                              get children() {
+                                return [_tmpl$182(), createComponent(Show, {
+                                  get when() {
+                                    return props.localStore.hideDisabledQueries !== "true";
+                                  },
+                                  get children() {
+                                    return createComponent(CheckCircle, {});
+                                  }
+                                })];
+                              }
+                            }), createComponent(dropdown_menu_exports.Item, {
+                              onSelect: () => {
+                                props.setLocalStore("hideDisabledQueries", "true");
+                              },
+                              as: "button",
+                              get ["class"]() {
+                                return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries === "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
+                              },
+                              get children() {
+                                return [_tmpl$192(), createComponent(Show, {
+                                  get when() {
+                                    return props.localStore.hideDisabledQueries === "true";
+                                  },
+                                  get children() {
+                                    return createComponent(CheckCircle, {});
+                                  }
+                                })];
+                              }
+                            })];
+                          }
+                        });
+                      }
+                    })];
+                  }
                 })];
               }
             });
@@ -10280,8 +10351,8 @@ var ContentView = (props) => {
         return selectedView() === "queries";
       },
       get children() {
-        var _el$39 = _tmpl$172(), _el$40 = _el$39.firstChild;
-        insert(_el$40, createComponent(Key, {
+        var _el$42 = _tmpl$202(), _el$43 = _el$42.firstChild;
+        insert(_el$43, createComponent(Key, {
           by: (q) => q.queryHash,
           get each() {
             return queries();
@@ -10292,8 +10363,8 @@ var ContentView = (props) => {
             }
           })
         }));
-        createRenderEffect(() => className(_el$39, clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container")));
-        return _el$39;
+        createRenderEffect(() => className(_el$42, clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container")));
+        return _el$42;
       }
     }), null);
     insert(_el$0, createComponent(Show, {
@@ -10301,8 +10372,8 @@ var ContentView = (props) => {
         return selectedView() === "mutations";
       },
       get children() {
-        var _el$41 = _tmpl$182(), _el$42 = _el$41.firstChild;
-        insert(_el$42, createComponent(Key, {
+        var _el$44 = _tmpl$212(), _el$45 = _el$44.firstChild;
+        insert(_el$45, createComponent(Key, {
           by: (m) => m.mutationId,
           get each() {
             return mutations();
@@ -10313,8 +10384,8 @@ var ContentView = (props) => {
             }
           })
         }));
-        createRenderEffect(() => className(_el$41, clsx(styles().overflowQueryContainer, "tsqd-mutations-overflow-container")));
-        return _el$41;
+        createRenderEffect(() => className(_el$44, clsx(styles().overflowQueryContainer, "tsqd-mutations-overflow-container")));
+        return _el$44;
       }
     }), null);
     createRenderEffect((_p$) => {
@@ -10436,38 +10507,38 @@ var QueryRow = (props) => {
       return queryState();
     },
     get children() {
-      var _el$47 = _tmpl$232(), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling;
-      _el$47.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
-      insert(_el$48, observers);
-      insert(_el$49, () => props.query.queryHash);
-      insert(_el$47, createComponent(Show, {
+      var _el$50 = _tmpl$262(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
+      _el$50.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
+      insert(_el$51, observers);
+      insert(_el$52, () => props.query.queryHash);
+      insert(_el$50, createComponent(Show, {
         get when() {
           return isDisabled();
         },
         get children() {
-          return _tmpl$212();
+          return _tmpl$242();
         }
       }), null);
-      insert(_el$47, createComponent(Show, {
+      insert(_el$50, createComponent(Show, {
         get when() {
           return isStatic();
         },
         get children() {
-          return _tmpl$222();
+          return _tmpl$252();
         }
       }), null);
       createRenderEffect((_p$) => {
         var _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
-        _v$24 !== _p$.e && className(_el$47, _p$.e = _v$24);
-        _v$25 !== _p$.t && setAttribute(_el$47, "aria-label", _p$.t = _v$25);
-        _v$26 !== _p$.a && className(_el$48, _p$.a = _v$26);
+        _v$24 !== _p$.e && className(_el$50, _p$.e = _v$24);
+        _v$25 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$25);
+        _v$26 !== _p$.a && className(_el$51, _p$.a = _v$26);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0
       });
-      return _el$47;
+      return _el$50;
     }
   });
 };
@@ -10522,11 +10593,11 @@ var MutationRow = (props) => {
       return mutationState();
     },
     get children() {
-      var _el$52 = _tmpl$232(), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
-      _el$52.$$click = () => {
+      var _el$55 = _tmpl$262(), _el$56 = _el$55.firstChild, _el$57 = _el$56.nextSibling;
+      _el$55.$$click = () => {
         setSelectedMutationId(props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId);
       };
-      insert(_el$53, createComponent(Show, {
+      insert(_el$56, createComponent(Show, {
         get when() {
           return color() === "purple";
         },
@@ -10534,7 +10605,7 @@ var MutationRow = (props) => {
           return createComponent(PauseCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$56, createComponent(Show, {
         get when() {
           return color() === "green";
         },
@@ -10542,7 +10613,7 @@ var MutationRow = (props) => {
           return createComponent(CheckCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$56, createComponent(Show, {
         get when() {
           return color() === "red";
         },
@@ -10550,7 +10621,7 @@ var MutationRow = (props) => {
           return createComponent(XCircle, {});
         }
       }), null);
-      insert(_el$53, createComponent(Show, {
+      insert(_el$56, createComponent(Show, {
         get when() {
           return color() === "yellow";
         },
@@ -10558,7 +10629,7 @@ var MutationRow = (props) => {
           return createComponent(LoadingCircle, {});
         }
       }), null);
-      insert(_el$54, createComponent(Show, {
+      insert(_el$57, createComponent(Show, {
         get when() {
           return props.mutation.options.mutationKey;
         },
@@ -10566,19 +10637,19 @@ var MutationRow = (props) => {
           return [memo(() => JSON.stringify(props.mutation.options.mutationKey)), " -", " "];
         }
       }), null);
-      insert(_el$54, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
+      insert(_el$57, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
       createRenderEffect((_p$) => {
         var _v$27 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$28 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$29 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
-        _v$27 !== _p$.e && className(_el$52, _p$.e = _v$27);
-        _v$28 !== _p$.t && setAttribute(_el$52, "aria-label", _p$.t = _v$28);
-        _v$29 !== _p$.a && className(_el$53, _p$.a = _v$29);
+        _v$27 !== _p$.e && className(_el$55, _p$.e = _v$27);
+        _v$28 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$28);
+        _v$29 !== _p$.a && className(_el$56, _p$.a = _v$29);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0
       });
-      return _el$52;
+      return _el$55;
     }
   });
 };
@@ -10596,44 +10667,44 @@ var QueryStatusCount = () => {
     return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   return (() => {
-    var _el$55 = _tmpl$26();
-    insert(_el$55, createComponent(QueryStatus, {
+    var _el$58 = _tmpl$26();
+    insert(_el$58, createComponent(QueryStatus, {
       label: "Fresh",
       color: "green",
       get count() {
         return fresh();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$58, createComponent(QueryStatus, {
       label: "Fetching",
       color: "blue",
       get count() {
         return fetching();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$58, createComponent(QueryStatus, {
       label: "Paused",
       color: "purple",
       get count() {
         return paused();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$58, createComponent(QueryStatus, {
       label: "Stale",
       color: "yellow",
       get count() {
         return stale();
       }
     }), null);
-    insert(_el$55, createComponent(QueryStatus, {
+    insert(_el$58, createComponent(QueryStatus, {
       label: "Inactive",
       color: "gray",
       get count() {
         return inactive();
       }
     }), null);
-    createRenderEffect(() => className(_el$55, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-    return _el$55;
+    createRenderEffect(() => className(_el$58, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$58;
   })();
 };
 var MutationStatusCount = () => {
@@ -10661,37 +10732,37 @@ var MutationStatusCount = () => {
     return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
   });
   return (() => {
-    var _el$56 = _tmpl$26();
-    insert(_el$56, createComponent(QueryStatus, {
+    var _el$59 = _tmpl$26();
+    insert(_el$59, createComponent(QueryStatus, {
       label: "Paused",
       color: "purple",
       get count() {
         return paused();
       }
     }), null);
-    insert(_el$56, createComponent(QueryStatus, {
+    insert(_el$59, createComponent(QueryStatus, {
       label: "Pending",
       color: "yellow",
       get count() {
         return pending();
       }
     }), null);
-    insert(_el$56, createComponent(QueryStatus, {
+    insert(_el$59, createComponent(QueryStatus, {
       label: "Success",
       color: "green",
       get count() {
         return success();
       }
     }), null);
-    insert(_el$56, createComponent(QueryStatus, {
+    insert(_el$59, createComponent(QueryStatus, {
       label: "Error",
       color: "red",
       get count() {
         return error();
       }
     }), null);
-    createRenderEffect(() => className(_el$56, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-    return _el$56;
+    createRenderEffect(() => className(_el$59, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$59;
   })();
 };
 var QueryStatus = (props) => {
@@ -10722,17 +10793,17 @@ var QueryStatus = (props) => {
     return true;
   });
   return (() => {
-    var _el$57 = _tmpl$262(), _el$59 = _el$57.firstChild, _el$61 = _el$59.nextSibling;
+    var _el$60 = _tmpl$29(), _el$62 = _el$60.firstChild, _el$64 = _el$62.nextSibling;
     var _ref$5 = tagRef;
-    typeof _ref$5 === "function" ? use(_ref$5, _el$57) : tagRef = _el$57;
-    _el$57.addEventListener("mouseleave", () => {
+    typeof _ref$5 === "function" ? use(_ref$5, _el$60) : tagRef = _el$60;
+    _el$60.addEventListener("mouseleave", () => {
       setMouseOver(false);
       setFocused(false);
     });
-    _el$57.addEventListener("mouseenter", () => setMouseOver(true));
-    _el$57.addEventListener("blur", () => setFocused(false));
-    _el$57.addEventListener("focus", () => setFocused(true));
-    spread(_el$57, mergeProps({
+    _el$60.addEventListener("mouseenter", () => setMouseOver(true));
+    _el$60.addEventListener("blur", () => setFocused(false));
+    _el$60.addEventListener("focus", () => setFocused(true));
+    spread(_el$60, mergeProps({
       get disabled() {
         return showLabel();
       },
@@ -10747,29 +10818,29 @@ var QueryStatus = (props) => {
     }, () => mouseOver() || focused() ? {
       "aria-describedby": "tsqd-status-tooltip"
     } : {}), false, true);
-    insert(_el$57, createComponent(Show, {
+    insert(_el$60, createComponent(Show, {
       get when() {
         return memo(() => !!!showLabel())() && (mouseOver() || focused());
       },
       get children() {
-        var _el$58 = _tmpl$242();
-        insert(_el$58, () => props.label);
-        createRenderEffect(() => className(_el$58, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
-        return _el$58;
+        var _el$61 = _tmpl$27();
+        insert(_el$61, () => props.label);
+        createRenderEffect(() => className(_el$61, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
+        return _el$61;
       }
-    }), _el$59);
-    insert(_el$57, createComponent(Show, {
+    }), _el$62);
+    insert(_el$60, createComponent(Show, {
       get when() {
         return showLabel();
       },
       get children() {
-        var _el$60 = _tmpl$252();
-        insert(_el$60, () => props.label);
-        createRenderEffect(() => className(_el$60, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
-        return _el$60;
+        var _el$63 = _tmpl$28();
+        insert(_el$63, () => props.label);
+        createRenderEffect(() => className(_el$63, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
+        return _el$63;
       }
-    }), _el$61);
-    insert(_el$61, () => props.count);
+    }), _el$64);
+    insert(_el$64, () => props.count);
     createRenderEffect((_p$) => {
       var _v$30 = clsx(css`
             width: ${tokens.size[1.5]};
@@ -10780,14 +10851,14 @@ var QueryStatus = (props) => {
               background-color: ${t2(colors[props.color][100], colors[props.color][900])};
               color: ${t2(colors[props.color][700], colors[props.color][300])};
             `, "tsqd-query-status-tag-count");
-      _v$30 !== _p$.e && className(_el$59, _p$.e = _v$30);
-      _v$31 !== _p$.t && className(_el$61, _p$.t = _v$31);
+      _v$30 !== _p$.e && className(_el$62, _p$.e = _v$30);
+      _v$31 !== _p$.t && className(_el$64, _p$.t = _v$31);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    return _el$57;
+    return _el$60;
   })();
 };
 var QueryDetails = () => {
@@ -10904,27 +10975,27 @@ var QueryDetails = () => {
       return memo(() => !!activeQuery())() && activeQueryState();
     },
     get children() {
-      var _el$62 = _tmpl$31(), _el$63 = _el$62.firstChild, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$65.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$70.nextSibling, _el$72 = _el$69.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling, _el$75 = _el$64.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.firstChild, _el$78 = _el$77.firstChild, _el$79 = _el$77.nextSibling, _el$80 = _el$79.firstChild, _el$81 = _el$79.nextSibling, _el$82 = _el$81.firstChild, _el$83 = _el$81.nextSibling, _el$84 = _el$83.firstChild, _el$85 = _el$83.nextSibling, _el$86 = _el$85.firstChild, _el$87 = _el$86.nextSibling, _el$96 = _el$76.nextSibling; _el$96.firstChild; var _el$106 = _el$96.nextSibling, _el$107 = _el$106.nextSibling;
-      insert(_el$67, () => displayValue(activeQuery().queryKey, true));
-      insert(_el$68, statusLabel);
-      insert(_el$71, observerCount);
-      insert(_el$74, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
-      _el$77.$$click = handleRefetch;
-      _el$79.$$click = () => {
+      var _el$65 = _tmpl$34(), _el$66 = _el$65.firstChild, _el$67 = _el$66.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.firstChild, _el$70 = _el$69.firstChild, _el$71 = _el$69.nextSibling, _el$72 = _el$68.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling, _el$75 = _el$72.nextSibling, _el$76 = _el$75.firstChild, _el$77 = _el$76.nextSibling, _el$78 = _el$67.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.firstChild, _el$81 = _el$80.firstChild, _el$82 = _el$80.nextSibling, _el$83 = _el$82.firstChild, _el$84 = _el$82.nextSibling, _el$85 = _el$84.firstChild, _el$86 = _el$84.nextSibling, _el$87 = _el$86.firstChild, _el$88 = _el$86.nextSibling, _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling, _el$99 = _el$79.nextSibling; _el$99.firstChild; var _el$109 = _el$99.nextSibling, _el$110 = _el$109.nextSibling;
+      insert(_el$70, () => displayValue(activeQuery().queryKey, true));
+      insert(_el$71, statusLabel);
+      insert(_el$74, observerCount);
+      insert(_el$77, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
+      _el$80.$$click = handleRefetch;
+      _el$82.$$click = () => {
         sendDevToolsEvent({
           type: "INVALIDATE",
           queryHash: activeQuery()?.queryHash
         });
         queryClient.invalidateQueries(activeQuery());
       };
-      _el$81.$$click = () => {
+      _el$84.$$click = () => {
         sendDevToolsEvent({
           type: "RESET",
           queryHash: activeQuery()?.queryHash
         });
         queryClient.resetQueries(activeQuery());
       };
-      _el$83.$$click = () => {
+      _el$86.$$click = () => {
         sendDevToolsEvent({
           type: "REMOVE",
           queryHash: activeQuery()?.queryHash
@@ -10932,7 +11003,7 @@ var QueryDetails = () => {
         queryClient.removeQueries(activeQuery());
         setSelectedQueryHash(null);
       };
-      _el$85.$$click = () => {
+      _el$88.$$click = () => {
         if (activeQuery()?.state.data === void 0) {
           setRestoringLoading(true);
           restoreQueryAfterLoadingOrError();
@@ -10962,14 +11033,14 @@ var QueryDetails = () => {
           });
         }
       };
-      insert(_el$85, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$87);
-      insert(_el$76, createComponent(Show, {
+      insert(_el$88, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$90);
+      insert(_el$79, createComponent(Show, {
         get when() {
           return errorTypes().length === 0 || queryStatus() === "error";
         },
         get children() {
-          var _el$88 = _tmpl$27(), _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling;
-          _el$88.$$click = () => {
+          var _el$91 = _tmpl$30(), _el$92 = _el$91.firstChild, _el$93 = _el$92.nextSibling;
+          _el$91.$$click = () => {
             if (!activeQuery().state.error) {
               triggerError();
             } else {
@@ -10980,71 +11051,71 @@ var QueryDetails = () => {
               queryClient.resetQueries(activeQuery());
             }
           };
-          insert(_el$88, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$90);
+          insert(_el$91, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$93);
           createRenderEffect((_p$) => {
             var _v$32 = clsx(css`
                   color: ${t2(colors.red[500], colors.red[400])};
                 `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$33 = queryStatus() === "pending", _v$34 = css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
-            _v$32 !== _p$.e && className(_el$88, _p$.e = _v$32);
-            _v$33 !== _p$.t && (_el$88.disabled = _p$.t = _v$33);
-            _v$34 !== _p$.a && className(_el$89, _p$.a = _v$34);
+            _v$32 !== _p$.e && className(_el$91, _p$.e = _v$32);
+            _v$33 !== _p$.t && (_el$91.disabled = _p$.t = _v$33);
+            _v$34 !== _p$.a && className(_el$92, _p$.a = _v$34);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$88;
+          return _el$91;
         }
       }), null);
-      insert(_el$76, createComponent(Show, {
+      insert(_el$79, createComponent(Show, {
         get when() {
           return !(errorTypes().length === 0 || queryStatus() === "error");
         },
         get children() {
-          var _el$91 = _tmpl$28(), _el$92 = _el$91.firstChild, _el$93 = _el$92.nextSibling, _el$94 = _el$93.nextSibling; _el$94.firstChild;
-          _el$94.addEventListener("change", (e2) => {
+          var _el$94 = _tmpl$31(), _el$95 = _el$94.firstChild, _el$96 = _el$95.nextSibling, _el$97 = _el$96.nextSibling; _el$97.firstChild;
+          _el$97.addEventListener("change", (e2) => {
             const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
             triggerError(errorType);
           });
-          insert(_el$94, createComponent(For, {
+          insert(_el$97, createComponent(For, {
             get each() {
               return errorTypes();
             },
             children: (errorType) => (() => {
-              var _el$108 = _tmpl$322();
-              insert(_el$108, () => errorType.name);
-              createRenderEffect(() => _el$108.value = errorType.name);
-              return _el$108;
+              var _el$111 = _tmpl$35();
+              insert(_el$111, () => errorType.name);
+              createRenderEffect(() => _el$111.value = errorType.name);
+              return _el$111;
             })()
           }), null);
-          insert(_el$91, createComponent(ChevronDown, {}), null);
+          insert(_el$94, createComponent(ChevronDown, {}), null);
           createRenderEffect((_p$) => {
             var _v$35 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$36 = css`
                   background-color: ${tokens.colors.red[400]};
                 `, _v$37 = queryStatus() === "pending";
-            _v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
-            _v$36 !== _p$.t && className(_el$92, _p$.t = _v$36);
-            _v$37 !== _p$.a && (_el$94.disabled = _p$.a = _v$37);
+            _v$35 !== _p$.e && className(_el$94, _p$.e = _v$35);
+            _v$36 !== _p$.t && className(_el$95, _p$.t = _v$36);
+            _v$37 !== _p$.a && (_el$97.disabled = _p$.a = _v$37);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$91;
+          return _el$94;
         }
       }), null);
-      insert(_el$96, () => dataMode() === "view" ? "Explorer" : "Editor", null);
-      insert(_el$62, createComponent(Show, {
+      insert(_el$99, () => dataMode() === "view" ? "Explorer" : "Editor", null);
+      insert(_el$65, createComponent(Show, {
         get when() {
           return dataMode() === "view";
         },
         get children() {
-          var _el$98 = _tmpl$29();
-          insert(_el$98, createComponent(Explorer, {
+          var _el$101 = _tmpl$322();
+          insert(_el$101, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
             get value() {
@@ -11056,17 +11127,17 @@ var QueryDetails = () => {
               return activeQuery();
             }
           }));
-          createRenderEffect((_$p) => (_$p = tokens.size[2]) != null ? _el$98.style.setProperty("padding", _$p) : _el$98.style.removeProperty("padding"));
-          return _el$98;
+          createRenderEffect((_$p) => (_$p = tokens.size[2]) != null ? _el$101.style.setProperty("padding", _$p) : _el$101.style.removeProperty("padding"));
+          return _el$101;
         }
-      }), _el$106);
-      insert(_el$62, createComponent(Show, {
+      }), _el$109);
+      insert(_el$65, createComponent(Show, {
         get when() {
           return dataMode() === "edit";
         },
         get children() {
-          var _el$99 = _tmpl$30(), _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$103.firstChild, _el$105 = _el$104.nextSibling;
-          _el$99.addEventListener("submit", (e2) => {
+          var _el$102 = _tmpl$332(), _el$103 = _el$102.firstChild, _el$104 = _el$103.nextSibling, _el$105 = _el$104.firstChild, _el$106 = _el$105.nextSibling, _el$107 = _el$106.firstChild, _el$108 = _el$107.nextSibling;
+          _el$102.addEventListener("submit", (e2) => {
             e2.preventDefault();
             const formData = new FormData(e2.currentTarget);
             const data = formData.get("data");
@@ -11081,23 +11152,23 @@ var QueryDetails = () => {
               setDataEditError(true);
             }
           });
-          _el$100.addEventListener("focus", () => setDataEditError(false));
-          insert(_el$102, () => dataEditError() ? "Invalid Value" : "");
-          _el$104.$$click = () => setDataMode("view");
+          _el$103.addEventListener("focus", () => setDataEditError(false));
+          insert(_el$105, () => dataEditError() ? "Invalid Value" : "");
+          _el$107.$$click = () => setDataMode("view");
           createRenderEffect((_p$) => {
             var _v$38 = clsx(styles().devtoolsEditForm, "tsqd-query-details-data-editor"), _v$39 = styles().devtoolsEditTextarea, _v$40 = dataEditError(), _v$41 = styles().devtoolsEditFormActions, _v$42 = styles().devtoolsEditFormError, _v$43 = styles().devtoolsEditFormActionContainer, _v$44 = clsx(styles().devtoolsEditFormAction, css`
                       color: ${t2(colors.gray[600], colors.gray[300])};
                     `), _v$45 = clsx(styles().devtoolsEditFormAction, css`
                       color: ${t2(colors.blue[600], colors.blue[400])};
                     `);
-            _v$38 !== _p$.e && className(_el$99, _p$.e = _v$38);
-            _v$39 !== _p$.t && className(_el$100, _p$.t = _v$39);
-            _v$40 !== _p$.a && setAttribute(_el$100, "data-error", _p$.a = _v$40);
-            _v$41 !== _p$.o && className(_el$101, _p$.o = _v$41);
-            _v$42 !== _p$.i && className(_el$102, _p$.i = _v$42);
-            _v$43 !== _p$.n && className(_el$103, _p$.n = _v$43);
-            _v$44 !== _p$.s && className(_el$104, _p$.s = _v$44);
-            _v$45 !== _p$.h && className(_el$105, _p$.h = _v$45);
+            _v$38 !== _p$.e && className(_el$102, _p$.e = _v$38);
+            _v$39 !== _p$.t && className(_el$103, _p$.t = _v$39);
+            _v$40 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$40);
+            _v$41 !== _p$.o && className(_el$104, _p$.o = _v$41);
+            _v$42 !== _p$.i && className(_el$105, _p$.i = _v$42);
+            _v$43 !== _p$.n && className(_el$106, _p$.n = _v$43);
+            _v$44 !== _p$.s && className(_el$107, _p$.s = _v$44);
+            _v$45 !== _p$.h && className(_el$108, _p$.h = _v$45);
             return _p$;
           }, {
             e: void 0,
@@ -11109,11 +11180,11 @@ var QueryDetails = () => {
             s: void 0,
             h: void 0
           });
-          createRenderEffect(() => _el$100.value = JSON.stringify(activeQueryStateData(), null, 2));
-          return _el$99;
+          createRenderEffect(() => _el$103.value = JSON.stringify(activeQueryStateData(), null, 2));
+          return _el$102;
         }
-      }), _el$106);
-      insert(_el$107, createComponent(Explorer, {
+      }), _el$109);
+      insert(_el$110, createComponent(Explorer, {
         label: "Query",
         defaultExpanded: ["Query", "queryKey"],
         get value() {
@@ -11142,30 +11213,30 @@ var QueryDetails = () => {
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$65 = restoringLoading(), _v$66 = css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, _v$67 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = tokens.size[2];
-        _v$46 !== _p$.e && className(_el$62, _p$.e = _v$46);
-        _v$47 !== _p$.t && className(_el$63, _p$.t = _v$47);
-        _v$48 !== _p$.a && className(_el$64, _p$.a = _v$48);
-        _v$49 !== _p$.o && className(_el$68, _p$.o = _v$49);
-        _v$50 !== _p$.i && className(_el$75, _p$.i = _v$50);
-        _v$51 !== _p$.n && className(_el$76, _p$.n = _v$51);
-        _v$52 !== _p$.s && className(_el$77, _p$.s = _v$52);
-        _v$53 !== _p$.h && (_el$77.disabled = _p$.h = _v$53);
-        _v$54 !== _p$.r && className(_el$78, _p$.r = _v$54);
-        _v$55 !== _p$.d && className(_el$79, _p$.d = _v$55);
-        _v$56 !== _p$.l && (_el$79.disabled = _p$.l = _v$56);
-        _v$57 !== _p$.u && className(_el$80, _p$.u = _v$57);
-        _v$58 !== _p$.c && className(_el$81, _p$.c = _v$58);
-        _v$59 !== _p$.w && (_el$81.disabled = _p$.w = _v$59);
-        _v$60 !== _p$.m && className(_el$82, _p$.m = _v$60);
-        _v$61 !== _p$.f && className(_el$83, _p$.f = _v$61);
-        _v$62 !== _p$.y && (_el$83.disabled = _p$.y = _v$62);
-        _v$63 !== _p$.g && className(_el$84, _p$.g = _v$63);
-        _v$64 !== _p$.p && className(_el$85, _p$.p = _v$64);
-        _v$65 !== _p$.b && (_el$85.disabled = _p$.b = _v$65);
-        _v$66 !== _p$.T && className(_el$86, _p$.T = _v$66);
-        _v$67 !== _p$.A && className(_el$96, _p$.A = _v$67);
-        _v$68 !== _p$.O && className(_el$106, _p$.O = _v$68);
-        _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$107.style.setProperty("padding", _v$69) : _el$107.style.removeProperty("padding"));
+        _v$46 !== _p$.e && className(_el$65, _p$.e = _v$46);
+        _v$47 !== _p$.t && className(_el$66, _p$.t = _v$47);
+        _v$48 !== _p$.a && className(_el$67, _p$.a = _v$48);
+        _v$49 !== _p$.o && className(_el$71, _p$.o = _v$49);
+        _v$50 !== _p$.i && className(_el$78, _p$.i = _v$50);
+        _v$51 !== _p$.n && className(_el$79, _p$.n = _v$51);
+        _v$52 !== _p$.s && className(_el$80, _p$.s = _v$52);
+        _v$53 !== _p$.h && (_el$80.disabled = _p$.h = _v$53);
+        _v$54 !== _p$.r && className(_el$81, _p$.r = _v$54);
+        _v$55 !== _p$.d && className(_el$82, _p$.d = _v$55);
+        _v$56 !== _p$.l && (_el$82.disabled = _p$.l = _v$56);
+        _v$57 !== _p$.u && className(_el$83, _p$.u = _v$57);
+        _v$58 !== _p$.c && className(_el$84, _p$.c = _v$58);
+        _v$59 !== _p$.w && (_el$84.disabled = _p$.w = _v$59);
+        _v$60 !== _p$.m && className(_el$85, _p$.m = _v$60);
+        _v$61 !== _p$.f && className(_el$86, _p$.f = _v$61);
+        _v$62 !== _p$.y && (_el$86.disabled = _p$.y = _v$62);
+        _v$63 !== _p$.g && className(_el$87, _p$.g = _v$63);
+        _v$64 !== _p$.p && className(_el$88, _p$.p = _v$64);
+        _v$65 !== _p$.b && (_el$88.disabled = _p$.b = _v$65);
+        _v$66 !== _p$.T && className(_el$89, _p$.T = _v$66);
+        _v$67 !== _p$.A && className(_el$99, _p$.A = _v$67);
+        _v$68 !== _p$.O && className(_el$109, _p$.O = _v$68);
+        _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$110.style.setProperty("padding", _v$69) : _el$110.style.removeProperty("padding"));
         return _p$;
       }, {
         e: void 0,
@@ -11193,7 +11264,7 @@ var QueryDetails = () => {
         O: void 0,
         I: void 0
       });
-      return _el$62;
+      return _el$65;
     }
   });
 };
@@ -11245,8 +11316,8 @@ var MutationDetails = () => {
       return activeMutation();
     },
     get children() {
-      var _el$109 = _tmpl$332(), _el$110 = _el$109.firstChild, _el$111 = _el$110.nextSibling, _el$112 = _el$111.firstChild, _el$113 = _el$112.firstChild, _el$114 = _el$113.firstChild, _el$115 = _el$113.nextSibling, _el$116 = _el$112.nextSibling, _el$117 = _el$116.firstChild, _el$118 = _el$117.nextSibling, _el$119 = _el$111.nextSibling, _el$120 = _el$119.nextSibling, _el$121 = _el$120.nextSibling, _el$122 = _el$121.nextSibling, _el$123 = _el$122.nextSibling, _el$124 = _el$123.nextSibling, _el$125 = _el$124.nextSibling, _el$126 = _el$125.nextSibling;
-      insert(_el$114, createComponent(Show, {
+      var _el$112 = _tmpl$36(), _el$113 = _el$112.firstChild, _el$114 = _el$113.nextSibling, _el$115 = _el$114.firstChild, _el$116 = _el$115.firstChild, _el$117 = _el$116.firstChild, _el$118 = _el$116.nextSibling, _el$119 = _el$115.nextSibling, _el$120 = _el$119.firstChild, _el$121 = _el$120.nextSibling, _el$122 = _el$114.nextSibling, _el$123 = _el$122.nextSibling, _el$124 = _el$123.nextSibling, _el$125 = _el$124.nextSibling, _el$126 = _el$125.nextSibling, _el$127 = _el$126.nextSibling, _el$128 = _el$127.nextSibling, _el$129 = _el$128.nextSibling;
+      insert(_el$117, createComponent(Show, {
         get when() {
           return activeMutation().options.mutationKey;
         },
@@ -11255,13 +11326,13 @@ var MutationDetails = () => {
           return displayValue(activeMutation().options.mutationKey, true);
         }
       }));
-      insert(_el$115, createComponent(Show, {
+      insert(_el$118, createComponent(Show, {
         get when() {
           return color() === "purple";
         },
         children: "pending"
       }), null);
-      insert(_el$115, createComponent(Show, {
+      insert(_el$118, createComponent(Show, {
         get when() {
           return color() !== "purple";
         },
@@ -11269,29 +11340,29 @@ var MutationDetails = () => {
           return status();
         }
       }), null);
-      insert(_el$118, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
-      insert(_el$120, createComponent(Explorer, {
+      insert(_el$121, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
+      insert(_el$123, createComponent(Explorer, {
         label: "Variables",
         defaultExpanded: ["Variables"],
         get value() {
           return activeMutation().state.variables;
         }
       }));
-      insert(_el$122, createComponent(Explorer, {
+      insert(_el$125, createComponent(Explorer, {
         label: "Context",
         defaultExpanded: ["Context"],
         get value() {
           return activeMutation().state.context;
         }
       }));
-      insert(_el$124, createComponent(Explorer, {
+      insert(_el$127, createComponent(Explorer, {
         label: "Data",
         defaultExpanded: ["Data"],
         get value() {
           return activeMutation().state.data;
         }
       }));
-      insert(_el$126, createComponent(Explorer, {
+      insert(_el$129, createComponent(Explorer, {
         label: "Mutation",
         defaultExpanded: ["Mutation"],
         get value() {
@@ -11300,18 +11371,18 @@ var MutationDetails = () => {
       }));
       createRenderEffect((_p$) => {
         var _v$70 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$73 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = tokens.size[2], _v$76 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$77 = tokens.size[2], _v$78 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$79 = tokens.size[2], _v$80 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$81 = tokens.size[2];
-        _v$70 !== _p$.e && className(_el$109, _p$.e = _v$70);
-        _v$71 !== _p$.t && className(_el$110, _p$.t = _v$71);
-        _v$72 !== _p$.a && className(_el$111, _p$.a = _v$72);
-        _v$73 !== _p$.o && className(_el$115, _p$.o = _v$73);
-        _v$74 !== _p$.i && className(_el$119, _p$.i = _v$74);
-        _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$120.style.setProperty("padding", _v$75) : _el$120.style.removeProperty("padding"));
-        _v$76 !== _p$.s && className(_el$121, _p$.s = _v$76);
-        _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$122.style.setProperty("padding", _v$77) : _el$122.style.removeProperty("padding"));
-        _v$78 !== _p$.r && className(_el$123, _p$.r = _v$78);
-        _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$124.style.setProperty("padding", _v$79) : _el$124.style.removeProperty("padding"));
-        _v$80 !== _p$.l && className(_el$125, _p$.l = _v$80);
-        _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$126.style.setProperty("padding", _v$81) : _el$126.style.removeProperty("padding"));
+        _v$70 !== _p$.e && className(_el$112, _p$.e = _v$70);
+        _v$71 !== _p$.t && className(_el$113, _p$.t = _v$71);
+        _v$72 !== _p$.a && className(_el$114, _p$.a = _v$72);
+        _v$73 !== _p$.o && className(_el$118, _p$.o = _v$73);
+        _v$74 !== _p$.i && className(_el$122, _p$.i = _v$74);
+        _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$123.style.setProperty("padding", _v$75) : _el$123.style.removeProperty("padding"));
+        _v$76 !== _p$.s && className(_el$124, _p$.s = _v$76);
+        _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$125.style.setProperty("padding", _v$77) : _el$125.style.removeProperty("padding"));
+        _v$78 !== _p$.r && className(_el$126, _p$.r = _v$78);
+        _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$127.style.setProperty("padding", _v$79) : _el$127.style.removeProperty("padding"));
+        _v$80 !== _p$.l && className(_el$128, _p$.l = _v$80);
+        _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$129.style.setProperty("padding", _v$81) : _el$129.style.removeProperty("padding"));
         return _p$;
       }, {
         e: void 0,
@@ -11327,7 +11398,7 @@ var MutationDetails = () => {
         l: void 0,
         u: void 0
       });
-      return _el$109;
+      return _el$112;
     }
   });
 };