@tanstack/query-devtools 5.83.1 → 5.84.0

package/build/dev.cjs

@@ -12791,7 +12791,7 @@ var init_Explorer = __esm({
 });
 
 // src/Devtools.tsx
-var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$03, _tmpl$111, _tmpl$103, _tmpl$112, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, _tmpl$332, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, offline, setOffline, Devtools, PiPPanel, ParentPanel, DraggablePanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, DEV_TOOLS_EVENT, sendDevToolsEvent, stylesFactory2, lightStyles2, darkStyles2;
+var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$03, _tmpl$111, _tmpl$103, _tmpl$112, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, _tmpl$332, _tmpl$34, _tmpl$35, _tmpl$36, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, offline, setOffline, Devtools, PiPPanel, ParentPanel, DraggablePanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, DEV_TOOLS_EVENT, sendDevToolsEvent, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12838,23 +12838,26 @@ var init_Devtools = __esm({
     _tmpl$142 = /* @__PURE__ */ template(`<span>Light`);
     _tmpl$152 = /* @__PURE__ */ template(`<span>Dark`);
     _tmpl$162 = /* @__PURE__ */ template(`<span>System`);
-    _tmpl$172 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
-    _tmpl$182 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
-    _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>`);
-    _tmpl$202 = /* @__PURE__ */ template(`<option>Sort by `);
-    _tmpl$212 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-    _tmpl$222 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
-    _tmpl$232 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-    _tmpl$242 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-    _tmpl$252 = /* @__PURE__ */ template(`<span>`);
-    _tmpl$262 = /* @__PURE__ */ template(`<button><span></span><span>`);
-    _tmpl$27 = /* @__PURE__ */ template(`<button><span></span> Error`);
-    _tmpl$28 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-    _tmpl$29 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
-    _tmpl$30 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
-    _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">`);
-    _tmpl$322 = /* @__PURE__ */ template(`<option>`);
-    _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">`);
+    _tmpl$172 = /* @__PURE__ */ template(`<span>Disabled Queries`);
+    _tmpl$182 = /* @__PURE__ */ template(`<span>Show`);
+    _tmpl$192 = /* @__PURE__ */ template(`<span>Hide`);
+    _tmpl$202 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
+    _tmpl$212 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
+    _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>`);
+    _tmpl$232 = /* @__PURE__ */ template(`<option>Sort by `);
+    _tmpl$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+    _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator>static`);
+    _tmpl$262 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+    _tmpl$27 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+    _tmpl$28 = /* @__PURE__ */ template(`<span>`);
+    _tmpl$29 = /* @__PURE__ */ template(`<button><span></span><span>`);
+    _tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
+    _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+    _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
+    _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
+    _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">`);
+    _tmpl$35 = /* @__PURE__ */ template(`<option>`);
+    _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">`);
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
@@ -13269,9 +13272,12 @@ var init_Devtools = __esm({
       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;
       }));
@@ -13296,7 +13302,7 @@ var init_Devtools = __esm({
         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 = () => {
@@ -13386,10 +13392,10 @@ var init_Devtools = __esm({
               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;
@@ -13405,10 +13411,10 @@ var init_Devtools = __esm({
               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;
@@ -13640,6 +13646,71 @@ var init_Devtools = __esm({
                           }
                         })];
                       }
+                    }), 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, {});
+                                      }
+                                    })];
+                                  }
+                                })];
+                              }
+                            });
+                          }
+                        })];
+                      }
                     })];
                   }
                 });
@@ -13652,8 +13723,8 @@ var init_Devtools = __esm({
             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();
@@ -13664,8 +13735,8 @@ var init_Devtools = __esm({
                 }
               })
             }));
-            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, {
@@ -13673,8 +13744,8 @@ var init_Devtools = __esm({
             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();
@@ -13685,8 +13756,8 @@ var init_Devtools = __esm({
                 }
               })
             }));
-            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$) => {
@@ -13808,38 +13879,38 @@ var init_Devtools = __esm({
           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;
         }
       });
     };
@@ -13894,11 +13965,11 @@ var init_Devtools = __esm({
           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";
             },
@@ -13906,7 +13977,7 @@ var init_Devtools = __esm({
               return createComponent(PauseCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$56, createComponent(Show, {
             get when() {
               return color() === "green";
             },
@@ -13914,7 +13985,7 @@ var init_Devtools = __esm({
               return createComponent(CheckCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$56, createComponent(Show, {
             get when() {
               return color() === "red";
             },
@@ -13922,7 +13993,7 @@ var init_Devtools = __esm({
               return createComponent(XCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$56, createComponent(Show, {
             get when() {
               return color() === "yellow";
             },
@@ -13930,7 +14001,7 @@ var init_Devtools = __esm({
               return createComponent(LoadingCircle, {});
             }
           }), null);
-          insert(_el$54, createComponent(Show, {
+          insert(_el$57, createComponent(Show, {
             get when() {
               return props.mutation.options.mutationKey;
             },
@@ -13938,19 +14009,19 @@ var init_Devtools = __esm({
               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;
         }
       });
     };
@@ -13968,44 +14039,44 @@ var init_Devtools = __esm({
         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;
       })();
     };
     MutationStatusCount = () => {
@@ -14033,37 +14104,37 @@ var init_Devtools = __esm({
         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;
       })();
     };
     QueryStatus = (props) => {
@@ -14094,17 +14165,17 @@ var init_Devtools = __esm({
         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();
           },
@@ -14119,29 +14190,29 @@ var init_Devtools = __esm({
         }, () => 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]};
@@ -14152,14 +14223,14 @@ var init_Devtools = __esm({
               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;
       })();
     };
     QueryDetails = () => {
@@ -14276,27 +14347,27 @@ var init_Devtools = __esm({
           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
@@ -14304,7 +14375,7 @@ var init_Devtools = __esm({
             queryClient.removeQueries(activeQuery());
             setSelectedQueryHash(null);
           };
-          _el$85.$$click = () => {
+          _el$88.$$click = () => {
             if (activeQuery()?.state.data === void 0) {
               setRestoringLoading(true);
               restoreQueryAfterLoadingOrError();
@@ -14334,14 +14405,14 @@ var init_Devtools = __esm({
               });
             }
           };
-          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 {
@@ -14352,71 +14423,71 @@ var init_Devtools = __esm({
                   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() {
@@ -14428,17 +14499,17 @@ var init_Devtools = __esm({
                   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");
@@ -14453,23 +14524,23 @@ var init_Devtools = __esm({
                   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,
@@ -14481,11 +14552,11 @@ var init_Devtools = __esm({
                 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() {
@@ -14514,30 +14585,30 @@ var init_Devtools = __esm({
               `, "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,
@@ -14565,7 +14636,7 @@ var init_Devtools = __esm({
             O: void 0,
             I: void 0
           });
-          return _el$62;
+          return _el$65;
         }
       });
     };
@@ -14617,8 +14688,8 @@ var init_Devtools = __esm({
           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;
             },
@@ -14627,13 +14698,13 @@ var init_Devtools = __esm({
               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";
             },
@@ -14641,29 +14712,29 @@ var init_Devtools = __esm({
               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() {
@@ -14672,18 +14743,18 @@ var init_Devtools = __esm({
           }));
           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,
@@ -14699,7 +14770,7 @@ var init_Devtools = __esm({
             l: void 0,
             u: void 0
           });
-          return _el$109;
+          return _el$112;
         }
       });
     };
@@ -15967,6 +16038,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   #position;
   #initialIsOpen;
   #errorTypes;
+  #hideDisabledQueries;
   #Component;
   #dispose;
   constructor(config) {
@@ -15980,7 +16052,8 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       initialIsOpen,
       errorTypes,
       styleNonce,
-      shadowDOMTarget
+      shadowDOMTarget,
+      hideDisabledQueries
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -15992,6 +16065,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -16018,6 +16092,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       const [pos] = this.#position;
       const [isOpen] = this.#initialIsOpen;
       const [errors] = this.#errorTypes;
+      const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       let Devtools2;
       if (this.#Component) {
@@ -16055,6 +16130,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         },
         get errorTypes() {
           return errors();
+        },
+        get hideDisabledQueries() {
+          return hideDisabledQueries();
         }
       }));
     }, el);
@@ -16088,6 +16166,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
   #position;
   #initialIsOpen;
   #errorTypes;
+  #hideDisabledQueries;
   #onClose;
   #Component;
   #dispose;
@@ -16103,7 +16182,8 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      onClose
+      onClose,
+      hideDisabledQueries
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -16115,6 +16195,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
+    this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
   }
   setButtonPosition(position) {
@@ -16145,6 +16226,7 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
       const [pos] = this.#position;
       const [isOpen] = this.#initialIsOpen;
       const [errors] = this.#errorTypes;
+      const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
       let Devtools2;
@@ -16184,6 +16266,9 @@ exports.TanstackQueryDevtoolsPanel = class TanstackQueryDevtoolsPanel {
         get errorTypes() {
           return errors();
         },
+        get hideDisabledQueries() {
+          return hideDisabledQueries();
+        },
         get onClose() {
           return onClose();
         }