@tanstack/query-devtools 5.21.0 → 5.21.5

package/build/index.cjs

@@ -12741,7 +12741,8 @@ var init_Explorer = __esm({
         entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -12873,7 +12874,7 @@ var Devtools_exports = {};
 __export(Devtools_exports, {
   default: () => Devtools_default
 });
-var _tmpl$24, _tmpl$25, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _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$26, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
+var _tmpl$24, _tmpl$25, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _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$26, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12901,36 +12902,37 @@ var init_Devtools = __esm({
     init_icons();
     init_Explorer();
     init_Context();
-    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
     _tmpl$25 = /* @__PURE__ */ template(`<div>`);
     _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
-    _tmpl$43 = /* @__PURE__ */ template(`<select>`);
-    _tmpl$53 = /* @__PURE__ */ template(`<span>Asc`);
-    _tmpl$63 = /* @__PURE__ */ template(`<span>Desc`);
-    _tmpl$73 = /* @__PURE__ */ template(`<div>Settings`);
-    _tmpl$83 = /* @__PURE__ */ template(`<span>Position`);
-    _tmpl$93 = /* @__PURE__ */ template(`<span>Top`);
-    _tmpl$103 = /* @__PURE__ */ template(`<span>Bottom`);
-    _tmpl$113 = /* @__PURE__ */ template(`<span>Left`);
-    _tmpl$122 = /* @__PURE__ */ template(`<span>Right`);
-    _tmpl$132 = /* @__PURE__ */ template(`<span>Theme`);
-    _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 class=tsqd-query-filter-textfield></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(`<button><div></div><code class=tsqd-query-hash>`);
-    _tmpl$232 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-    _tmpl$242 = /* @__PURE__ */ template(`<span>`);
-    _tmpl$252 = /* @__PURE__ */ template(`<button><span></span><span>`);
-    _tmpl$26 = /* @__PURE__ */ template(`<button><span></span> Error`);
-    _tmpl$27 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-    _tmpl$28 = /* @__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 Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
-    _tmpl$29 = /* @__PURE__ */ template(`<option>`);
-    _tmpl$30 = /* @__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$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort>`);
+    _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
+    _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
+    _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
+    _tmpl$83 = /* @__PURE__ */ template(`<div>Settings`);
+    _tmpl$93 = /* @__PURE__ */ template(`<span>Position`);
+    _tmpl$103 = /* @__PURE__ */ template(`<span>Top`);
+    _tmpl$113 = /* @__PURE__ */ template(`<span>Bottom`);
+    _tmpl$122 = /* @__PURE__ */ template(`<span>Left`);
+    _tmpl$132 = /* @__PURE__ */ template(`<span>Right`);
+    _tmpl$142 = /* @__PURE__ */ template(`<span>Theme`);
+    _tmpl$152 = /* @__PURE__ */ template(`<span>Light`);
+    _tmpl$162 = /* @__PURE__ */ template(`<span>Dark`);
+    _tmpl$172 = /* @__PURE__ */ template(`<span>System`);
+    _tmpl$182 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
+    _tmpl$192 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
+    _tmpl$202 = /* @__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 class=tsqd-query-filter-textfield 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$212 = /* @__PURE__ */ template(`<option>Sort by `);
+    _tmpl$222 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+    _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$26 = /* @__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><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 Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+    _tmpl$30 = /* @__PURE__ */ template(`<option>`);
+    _tmpl$31 = /* @__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">`);
     firstBreakpoint = 1024;
     secondBreakpoint = 796;
     thirdBreakpoint = 700;
@@ -13044,7 +13046,7 @@ var init_Devtools = __esm({
                 insert(_el$3, createComponent(TanstackLogo, {}));
                 _el$4.$$click = () => props.setLocalStore("open", "true");
                 insert(_el$4, createComponent(TanstackLogo, {}));
-                createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`])));
+                createRenderEffect(() => className(_el$2, clsx(styles().devtoolsBtn, styles()[`devtoolsBtn-position-${buttonPosition()}`], "tsqd-open-btn-container")));
                 return _el$2;
               }
             });
@@ -13277,7 +13279,7 @@ var init_Devtools = __esm({
         el.style.setProperty("--tsqd-font-size", variable);
       };
       return [(() => {
-        const _el$8 = _tmpl$192(), _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$9.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;
+        const _el$8 = _tmpl$202(), _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$9.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;
         const _ref$3 = containerRef;
         typeof _ref$3 === "function" ? use(_ref$3, _el$8) : containerRef = _el$8;
         _el$11.$$click = () => props.setLocalStore("open", "false");
@@ -13359,7 +13361,7 @@ var init_Devtools = __esm({
               props.setLocalStore("sort", e2.currentTarget.value);
             });
             insert(_el$20, () => Object.keys(sortFns).map((key) => (() => {
-              const _el$42 = _tmpl$202(); _el$42.firstChild;
+              const _el$42 = _tmpl$212(); _el$42.firstChild;
               _el$42.value = key;
               insert(_el$42, key, null);
               return _el$42;
@@ -13373,12 +13375,12 @@ var init_Devtools = __esm({
             return selectedView() === "mutations";
           },
           get children() {
-            const _el$21 = _tmpl$43();
+            const _el$21 = _tmpl$53();
             _el$21.addEventListener("change", (e2) => {
               props.setLocalStore("mutationSort", e2.currentTarget.value);
             });
             insert(_el$21, () => Object.keys(mutationSortFns).map((key) => (() => {
-              const _el$44 = _tmpl$202(); _el$44.firstChild;
+              const _el$44 = _tmpl$212(); _el$44.firstChild;
               _el$44.value = key;
               insert(_el$44, key, null);
               return _el$44;
@@ -13400,7 +13402,7 @@ var init_Devtools = __esm({
             return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === 1;
           },
           get children() {
-            return [_tmpl$53(), createComponent(ArrowUp, {})];
+            return [_tmpl$63(), createComponent(ArrowUp, {})];
           }
         }), null);
         insert(_el$22, createComponent(Show, {
@@ -13408,7 +13410,7 @@ var init_Devtools = __esm({
             return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1;
           },
           get children() {
-            return [_tmpl$63(), createComponent(ArrowDown, {})];
+            return [_tmpl$73(), createComponent(ArrowDown, {})];
           }
         }), null);
         _el$26.$$click = () => {
@@ -13451,7 +13453,7 @@ var init_Devtools = __esm({
                   },
                   get children() {
                     return [(() => {
-                      const _el$28 = _tmpl$73();
+                      const _el$28 = _tmpl$83();
                       createRenderEffect(() => className(_el$28, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
                       return _el$28;
                     })(), createComponent(index$f.Sub, {
@@ -13464,7 +13466,7 @@ var init_Devtools = __esm({
                             return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
                           },
                           get children() {
-                            return [_tmpl$83(), createComponent(ChevronDown, {})];
+                            return [_tmpl$93(), createComponent(ChevronDown, {})];
                           }
                         }), createComponent(index$f.Portal, {
                           ref: (el) => setComputedVariables(el),
@@ -13483,7 +13485,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
                                   },
                                   get children() {
-                                    return [_tmpl$93(), createComponent(ArrowUp, {})];
+                                    return [_tmpl$103(), createComponent(ArrowUp, {})];
                                   }
                                 }), createComponent(index$f.Item, {
                                   onSelect: () => {
@@ -13494,7 +13496,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
                                   },
                                   get children() {
-                                    return [_tmpl$103(), createComponent(ArrowDown, {})];
+                                    return [_tmpl$113(), createComponent(ArrowDown, {})];
                                   }
                                 }), createComponent(index$f.Item, {
                                   onSelect: () => {
@@ -13505,7 +13507,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
                                   },
                                   get children() {
-                                    return [_tmpl$113(), createComponent(ArrowLeft, {})];
+                                    return [_tmpl$122(), createComponent(ArrowLeft, {})];
                                   }
                                 }), createComponent(index$f.Item, {
                                   onSelect: () => {
@@ -13516,7 +13518,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
                                   },
                                   get children() {
-                                    return [_tmpl$122(), createComponent(ArrowRight, {})];
+                                    return [_tmpl$132(), createComponent(ArrowRight, {})];
                                   }
                                 })];
                               }
@@ -13534,7 +13536,7 @@ var init_Devtools = __esm({
                             return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
                           },
                           get children() {
-                            return [_tmpl$132(), createComponent(ChevronDown, {})];
+                            return [_tmpl$142(), createComponent(ChevronDown, {})];
                           }
                         }), createComponent(index$f.Portal, {
                           ref: (el) => setComputedVariables(el),
@@ -13553,7 +13555,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
                                   },
                                   get children() {
-                                    return [_tmpl$142(), createComponent(Sun, {})];
+                                    return [_tmpl$152(), createComponent(Sun, {})];
                                   }
                                 }), createComponent(index$f.Item, {
                                   onSelect: () => {
@@ -13564,7 +13566,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
                                   },
                                   get children() {
-                                    return [_tmpl$152(), createComponent(Moon, {})];
+                                    return [_tmpl$162(), createComponent(Moon, {})];
                                   }
                                 }), createComponent(index$f.Item, {
                                   onSelect: () => {
@@ -13575,7 +13577,7 @@ var init_Devtools = __esm({
                                     return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
                                   },
                                   get children() {
-                                    return [_tmpl$162(), createComponent(Monitor, {})];
+                                    return [_tmpl$172(), createComponent(Monitor, {})];
                                   }
                                 })];
                               }
@@ -13595,7 +13597,7 @@ var init_Devtools = __esm({
             return selectedView() === "queries";
           },
           get children() {
-            const _el$38 = _tmpl$172(), _el$39 = _el$38.firstChild;
+            const _el$38 = _tmpl$182(), _el$39 = _el$38.firstChild;
             insert(_el$39, createComponent(Key, {
               by: (q) => q.queryHash,
               get each() {
@@ -13616,7 +13618,7 @@ var init_Devtools = __esm({
             return selectedView() === "mutations";
           },
           get children() {
-            const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild;
+            const _el$40 = _tmpl$192(), _el$41 = _el$40.firstChild;
             insert(_el$41, createComponent(Key, {
               by: (m) => m.mutationId,
               get each() {
@@ -13743,7 +13745,7 @@ var init_Devtools = __esm({
           return queryState();
         },
         get children() {
-          const _el$46 = _tmpl$222(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
+          const _el$46 = _tmpl$232(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
           _el$46.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
           insert(_el$47, observers);
           insert(_el$48, () => props.query.queryHash);
@@ -13752,7 +13754,7 @@ var init_Devtools = __esm({
               return isDisabled();
             },
             get children() {
-              return _tmpl$212();
+              return _tmpl$222();
             }
           }), null);
           createRenderEffect((_p$) => {
@@ -13820,7 +13822,7 @@ var init_Devtools = __esm({
           return mutationState();
         },
         get children() {
-          const _el$50 = _tmpl$222(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
+          const _el$50 = _tmpl$232(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
           _el$50.$$click = () => {
             setSelectedMutationId(props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId);
           };
@@ -14011,7 +14013,7 @@ var init_Devtools = __esm({
         return true;
       });
       return (() => {
-        const _el$55 = _tmpl$252(), _el$57 = _el$55.firstChild, _el$59 = _el$57.nextSibling;
+        const _el$55 = _tmpl$26(), _el$57 = _el$55.firstChild, _el$59 = _el$57.nextSibling;
         const _ref$4 = tagRef;
         typeof _ref$4 === "function" ? use(_ref$4, _el$55) : tagRef = _el$55;
         _el$55.addEventListener("mouseleave", () => {
@@ -14041,7 +14043,7 @@ var init_Devtools = __esm({
             return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
           },
           get children() {
-            const _el$56 = _tmpl$232();
+            const _el$56 = _tmpl$242();
             insert(_el$56, () => props.label);
             createRenderEffect(() => className(_el$56, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
             return _el$56;
@@ -14052,7 +14054,7 @@ var init_Devtools = __esm({
             return showLabel();
           },
           get children() {
-            const _el$58 = _tmpl$242();
+            const _el$58 = _tmpl$252();
             insert(_el$58, () => props.label);
             createRenderEffect(() => className(_el$58, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
             return _el$58;
@@ -14162,7 +14164,7 @@ var init_Devtools = __esm({
           return createMemo(() => !!activeQuery())() && activeQueryState();
         },
         get children() {
-          const _el$60 = _tmpl$28(), _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$63.firstChild, _el$65 = _el$64.firstChild, _el$66 = _el$64.nextSibling, _el$67 = _el$63.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling, _el$70 = _el$67.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$62.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.firstChild, _el$76 = _el$75.firstChild, _el$77 = _el$75.nextSibling, _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$84.nextSibling, _el$94 = _el$74.nextSibling, _el$95 = _el$94.nextSibling, _el$96 = _el$95.nextSibling, _el$97 = _el$96.nextSibling;
+          const _el$60 = _tmpl$29(), _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$63.firstChild, _el$65 = _el$64.firstChild, _el$66 = _el$64.nextSibling, _el$67 = _el$63.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling, _el$70 = _el$67.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$62.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.firstChild, _el$76 = _el$75.firstChild, _el$77 = _el$75.nextSibling, _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$84.nextSibling, _el$94 = _el$74.nextSibling, _el$95 = _el$94.nextSibling, _el$96 = _el$95.nextSibling, _el$97 = _el$96.nextSibling;
           insert(_el$65, () => displayValue(activeQuery().queryKey, true));
           insert(_el$66, statusLabel);
           insert(_el$69, observerCount);
@@ -14207,7 +14209,7 @@ var init_Devtools = __esm({
               return errorTypes().length === 0 || queryStatus() === "error";
             },
             get children() {
-              const _el$86 = _tmpl$26(), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
+              const _el$86 = _tmpl$27(), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
               _el$86.$$click = () => {
                 if (!activeQuery().state.error) {
                   triggerError();
@@ -14239,7 +14241,7 @@ var init_Devtools = __esm({
               return !(errorTypes().length === 0 || queryStatus() === "error");
             },
             get children() {
-              const _el$89 = _tmpl$27(), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$91.nextSibling; _el$92.firstChild;
+              const _el$89 = _tmpl$28(), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$91.nextSibling; _el$92.firstChild;
               _el$92.addEventListener("change", (e2) => {
                 const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
                 triggerError(errorType);
@@ -14249,7 +14251,7 @@ var init_Devtools = __esm({
                   return errorTypes();
                 },
                 children: (errorType) => (() => {
-                  const _el$98 = _tmpl$29();
+                  const _el$98 = _tmpl$30();
                   insert(_el$98, () => errorType.name);
                   createRenderEffect(() => _el$98.value = errorType.name);
                   return _el$98;
@@ -14416,7 +14418,7 @@ var init_Devtools = __esm({
           return activeMutation();
         },
         get children() {
-          const _el$99 = _tmpl$30(), _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.firstChild, _el$104 = _el$103.firstChild, _el$105 = _el$103.nextSibling, _el$106 = _el$102.nextSibling, _el$107 = _el$106.firstChild, _el$108 = _el$107.nextSibling, _el$109 = _el$101.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$110.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling, _el$116 = _el$115.nextSibling;
+          const _el$99 = _tmpl$31(), _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.firstChild, _el$104 = _el$103.firstChild, _el$105 = _el$103.nextSibling, _el$106 = _el$102.nextSibling, _el$107 = _el$106.firstChild, _el$108 = _el$107.nextSibling, _el$109 = _el$101.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$110.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling, _el$116 = _el$115.nextSibling;
           insert(_el$104, createComponent(Show, {
             get when() {
               return activeMutation().options.mutationKey;
@@ -14836,7 +14838,7 @@ var init_Devtools = __esm({
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
         dragHandle: u`
@@ -15201,7 +15203,8 @@ var init_Devtools = __esm({
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -15226,7 +15229,7 @@ var init_Devtools = __esm({
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -15234,7 +15237,7 @@ var init_Devtools = __esm({
       text-align: left;
     `,
         detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -15266,7 +15269,8 @@ var init_Devtools = __esm({
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -15291,7 +15295,7 @@ var init_Devtools = __esm({
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -15376,7 +15380,7 @@ var init_Devtools = __esm({
         settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};

package/build/index.js

@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/4IXB5NHK.js'));
+        Devtools = lazy(() => import('./Devtools/MY47IRH5.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/2ACMJH2B.jsx"));
+        Devtools = lazy(() => import("./Devtools/OQR5HZUS.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.21.0",
+  "version": "5.21.5",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.13.3",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.9.1",
-    "@tanstack/query-core": "5.20.5"
+    "@tanstack/query-core": "5.21.4"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -252,6 +252,7 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
             class={cx(
               styles().devtoolsBtn,
               styles()[`devtoolsBtn-position-${buttonPosition()}`],
+              'tsqd-open-btn-container',
             )}
           >
             <div aria-hidden="true">
@@ -260,6 +261,7 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
             <button
               aria-label="Open Tanstack query devtools"
               onClick={() => props.setLocalStore('open', 'true')}
+              class="tsqd-open-btn"
             >
               <TanstackLogo />
             </button>
@@ -692,6 +694,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
                   }
                 }}
                 class="tsqd-query-filter-textfield"
+                name="tsqd-query-filter-input"
                 value={
                   selectedView() === 'queries'
                     ? props.localStore.filter || ''
@@ -708,6 +711,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               <Show when={selectedView() === 'queries'}>
                 <select
                   value={sort()}
+                  name="tsqd-queries-filter-sort"
                   onChange={(e) => {
                     props.setLocalStore('sort', e.currentTarget.value)
                   }}
@@ -720,6 +724,7 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               <Show when={selectedView() === 'mutations'}>
                 <select
                   value={mutationSort()}
+                  name="tsqd-mutations-filter-sort"
                   onChange={(e) => {
                     props.setLocalStore('mutationSort', e.currentTarget.value)
                   }}
@@ -2417,7 +2422,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: css`
@@ -2782,7 +2787,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -2807,7 +2813,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       flex: 1 1 700px;
       background-color: ${t(colors.gray[50], colors.darkGray[700])};
       color: ${t(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -2815,7 +2821,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       text-align: left;
     `,
     detailsHeader: css`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -2847,7 +2853,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -2872,7 +2879,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -2957,7 +2964,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     settingsMenu: css`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size[0.5]};

package/src/Explorer.tsx

@@ -489,7 +489,8 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     entry: css`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;