@tanstack/query-devtools 5.91.1 → 5.93.0

package/build/index.cjs

@@ -316,7 +316,7 @@ function useTransition() {
   return [transPending, startTransition];
 }
 function createContext(defaultValue, options) {
-  const id = Symbol("context");
+  const id = /* @__PURE__ */ Symbol("context");
   return {
     id,
     Provider: createProvider(id),
@@ -1145,9 +1145,9 @@ var init_solid = __esm({
     };
     IS_DEV = false;
     equalFn = (a2, b2) => a2 === b2;
-    $PROXY = Symbol("solid-proxy");
+    $PROXY = /* @__PURE__ */ Symbol("solid-proxy");
     SUPPORTS_PROXY = typeof Proxy === "function";
-    $TRACK = Symbol("solid-track");
+    $TRACK = /* @__PURE__ */ Symbol("solid-track");
     signalOptions = {
       equals: equalFn
     };
@@ -1171,7 +1171,7 @@ var init_solid = __esm({
     Effects = null;
     ExecCount = 0;
     [transPending, setTransPending] = /* @__PURE__ */ createSignal(false);
-    FALLBACK = Symbol("fallback");
+    FALLBACK = /* @__PURE__ */ Symbol("fallback");
     hydrationEnabled = false;
     propTraps = {
       get(_, property, receiver) {
@@ -3744,14 +3744,14 @@ var init_lib = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/goober@2.1.16_csstype@3.1.3/node_modules/goober/dist/goober.modern.js
+// ../../node_modules/.pnpm/goober@2.1.16_csstype@3.2.3/node_modules/goober/dist/goober.modern.js
 function u(e2) {
   let r2 = this || {}, l2 = e2.call ? e2(r2.p) : e2;
   return i(l2.unshift ? l2.raw ? p(l2, [].slice.call(arguments, 1), r2.p) : l2.reduce((e3, t2) => Object.assign(e3, t2 && t2.call ? t2(r2.p) : t2), {}) : l2, t(r2.target), r2.g, r2.o, r2.k);
 }
 var e, t, l, a, n, o, c, s, i, p;
 var init_goober_modern = __esm({
-  "../../node_modules/.pnpm/goober@2.1.16_csstype@3.1.3/node_modules/goober/dist/goober.modern.js"() {
+  "../../node_modules/.pnpm/goober@2.1.16_csstype@3.2.3/node_modules/goober/dist/goober.modern.js"() {
     e = { data: "" };
     t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e;
     l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g;
@@ -4167,7 +4167,7 @@ var init_dist8 = __esm({
   "../../node_modules/.pnpm/@solid-primitives+keyed@1.2.2_solid-js@1.9.7/node_modules/@solid-primitives/keyed/dist/index.js"() {
     init_solid();
     init_web();
-    FALLBACK2 = Symbol("fallback");
+    FALLBACK2 = /* @__PURE__ */ Symbol("fallback");
   }
 });
 
@@ -11949,7 +11949,7 @@ var init_QueryDevtoolsContext = __esm({
 });
 
 // src/contexts/PiPContext.tsx
-var PiPContext, PiPProvider, usePiPWindow;
+var PipOpenError, PiPContext, PiPProvider, usePiPWindow;
 var init_PiPContext = __esm({
   "src/contexts/PiPContext.tsx"() {
     init_web();
@@ -11957,6 +11957,8 @@ var init_PiPContext = __esm({
     init_web();
     init_constants();
     init_QueryDevtoolsContext();
+    PipOpenError = class extends Error {
+    };
     PiPContext = createContext(void 0);
     PiPProvider = (props) => {
       const [pipWindow, setPipWindow] = createSignal(null);
@@ -11973,7 +11975,7 @@ var init_PiPContext = __esm({
         }
         const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
         if (!pip) {
-          throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
+          throw new PipOpenError("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
         }
         pip.document.head.innerHTML = "";
         pip.document.body.innerHTML = "";
@@ -12017,7 +12019,16 @@ var init_PiPContext = __esm({
       createEffect(() => {
         const pip_open = props.localStore.pip_open ?? "false";
         if (pip_open === "true" && !props.disabled) {
-          requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
+          try {
+            requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || PIP_DEFAULT_HEIGHT));
+          } catch (error) {
+            if (error instanceof PipOpenError) {
+              props.setLocalStore("pip_open", "false");
+              props.setLocalStore("open", "false");
+              return;
+            }
+            throw error;
+          }
         }
       });
       createEffect(() => {
@@ -12825,9 +12836,9 @@ var init_Devtools = __esm({
     init_constants();
     _tmpl$25 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button type=button aria-label="Open Tanstack query devtools"class=tsqd-open-btn>`);
     _tmpl$26 = /* @__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 name=tsqd-queries-filter-sort>`);
-    _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort>`);
+    _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div role=separator aria-label="Resize devtools panel"tabindex=0></div><button aria-label="Close tanstack query devtools">`);
+    _tmpl$43 = /* @__PURE__ */ template(`<select name=tsqd-queries-filter-sort aria-label="Sort queries by">`);
+    _tmpl$53 = /* @__PURE__ */ template(`<select name=tsqd-mutations-filter-sort aria-label="Sort mutations by">`);
     _tmpl$63 = /* @__PURE__ */ template(`<span>Asc`);
     _tmpl$73 = /* @__PURE__ */ template(`<span>Desc`);
     _tmpl$83 = /* @__PURE__ */ template(`<button aria-label="Open in picture-in-picture mode"title="Open in picture-in-picture mode">`);
@@ -12848,19 +12859,19 @@ var init_Devtools = __esm({
     _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$242 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator aria-hidden=true>disabled`);
+    _tmpl$252 = /* @__PURE__ */ template(`<div class=tsqd-query-static-indicator aria-hidden=true>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$29 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span><span>`);
+    _tmpl$30 = /* @__PURE__ */ template(`<button><span aria-hidden=true></span> Error`);
+    _tmpl$31 = /* @__PURE__ */ template(`<div><span aria-hidden=true></span>Trigger Error<select aria-label="Select error type to trigger"><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 role=status aria-live=polite aria-atomic=true><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$332 = /* @__PURE__ */ template(`<form><textarea name=data aria-label="Edit query data as JSON"></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
+    _tmpl$34 = /* @__PURE__ */ template(`<div><div role=heading aria-level=2>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span role=status aria-live=polite></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 role=heading aria-level=2>Actions</div><div><button><span aria-hidden=true></span>Refetch</button><button><span aria-hidden=true></span>Invalidate</button><button><span aria-hidden=true></span>Reset</button><button><span aria-hidden=true></span>Remove</button><button><span aria-hidden=true></span> Loading</button></div><div role=heading aria-level=2>Data </div><div role=heading aria-level=2>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 role=status aria-live=polite aria-atomic=true><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$36 = /* @__PURE__ */ template(`<div><div role=heading aria-level=2>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span role=status aria-live=polite></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div role=heading aria-level=2>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div role=heading aria-level=2>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);
@@ -13116,6 +13127,10 @@ var init_Devtools = __esm({
       const styles = createMemo(() => {
         return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
+      let closeBtnRef;
+      onMount(() => {
+        closeBtnRef.focus();
+      });
       const [isResizing, setIsResizing] = createSignal(false);
       const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
       const handleDragStart = (event) => {
@@ -13159,7 +13174,7 @@ var init_Devtools = __esm({
             setIsResizing(false);
           }
           document.removeEventListener("mousemove", runDrag, false);
-          document.removeEventListener("mouseUp", unsubscribe, false);
+          document.removeEventListener("mouseup", unsubscribe, false);
         };
         document.addEventListener("mousemove", runDrag, false);
         document.addEventListener("mouseup", unsubscribe, false);
@@ -13220,8 +13235,32 @@ var init_Devtools = __esm({
         var _el$7 = _tmpl$33(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
         var _ref$3 = panelRef;
         typeof _ref$3 === "function" ? use(_ref$3, _el$7) : panelRef = _el$7;
+        _el$8.$$keydown = (e2) => {
+          const step = 10;
+          const minHeight = convertRemToPixels(3.5);
+          const minWidth = convertRemToPixels(12);
+          if (position() === "top" || position() === "bottom") {
+            if (e2.key === "ArrowUp" || e2.key === "ArrowDown") {
+              e2.preventDefault();
+              const currentHeight = Number(props.localStore.height || DEFAULT_HEIGHT);
+              const delta = position() === "bottom" ? e2.key === "ArrowUp" ? step : -10 : e2.key === "ArrowDown" ? step : -10;
+              const newHeight = Math.max(minHeight, currentHeight + delta);
+              props.setLocalStore("height", String(newHeight));
+            }
+          } else {
+            if (e2.key === "ArrowLeft" || e2.key === "ArrowRight") {
+              e2.preventDefault();
+              const currentWidth = Number(props.localStore.width || DEFAULT_WIDTH);
+              const delta = position() === "right" ? e2.key === "ArrowLeft" ? step : -10 : e2.key === "ArrowRight" ? step : -10;
+              const newWidth = Math.max(minWidth, currentWidth + delta);
+              props.setLocalStore("width", String(newWidth));
+            }
+          }
+        };
         _el$8.$$mousedown = handleDragStart;
         _el$9.$$click = () => props.setLocalStore("open", "false");
+        var _ref$4 = closeBtnRef;
+        typeof _ref$4 === "function" ? use(_ref$4, _el$9) : closeBtnRef = _el$9;
         insert(_el$9, createComponent(ChevronDown, {}));
         insert(_el$7, createComponent(ContentView, props), null);
         createRenderEffect((_p$) => {
@@ -13229,19 +13268,25 @@ var init_Devtools = __esm({
             [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
-          }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
+          }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = position() === "top" || position() === "bottom" ? "horizontal" : "vertical", _v$5 = position() === "top" || position() === "bottom" ? convertRemToPixels(3.5) : convertRemToPixels(12), _v$6 = position() === "top" || position() === "bottom" ? Number(props.localStore.height || DEFAULT_HEIGHT) : Number(props.localStore.width || DEFAULT_WIDTH), _v$7 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$8 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
           _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
           _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$7.style.setProperty("height", _v$2) : _el$7.style.removeProperty("height"));
           _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$7.style.setProperty("width", _v$3) : _el$7.style.removeProperty("width"));
-          _v$4 !== _p$.o && className(_el$8, _p$.o = _v$4);
-          _v$5 !== _p$.i && className(_el$9, _p$.i = _v$5);
+          _v$4 !== _p$.o && setAttribute(_el$8, "aria-orientation", _p$.o = _v$4);
+          _v$5 !== _p$.i && setAttribute(_el$8, "aria-valuemin", _p$.i = _v$5);
+          _v$6 !== _p$.n && setAttribute(_el$8, "aria-valuenow", _p$.n = _v$6);
+          _v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
+          _v$8 !== _p$.h && className(_el$9, _p$.h = _v$8);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0,
-          i: void 0
+          i: void 0,
+          n: void 0,
+          s: void 0,
+          h: void 0
         });
         return _el$7;
       })();
@@ -13306,8 +13351,8 @@ var init_Devtools = __esm({
       };
       return [(() => {
         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;
+        var _ref$5 = containerRef;
+        typeof _ref$5 === "function" ? use(_ref$5, _el$0) : containerRef = _el$0;
         _el$11.$$click = () => {
           if (!pip().pipWindow && !props.showPanelViewOnly) {
             props.setLocalStore("open", "false");
@@ -13326,6 +13371,7 @@ var init_Devtools = __esm({
           get value() {
             return selectedView();
           },
+          "aria-label": "Toggle between queries and mutations view",
           onChange: (value) => {
             setSelectedView(value);
             setSelectedQueryHash(null);
@@ -13672,12 +13718,12 @@ var init_Devtools = __esm({
                               get ["class"]() {
                                 return clsx(styles().settingsMenu, "tsqd-settings-submenu");
                               },
-                              "aria-label": "Hide disabled queries setting",
                               get children() {
                                 return createComponent(dropdown_menu_exports.RadioGroup, {
                                   get value() {
                                     return props.localStore.hideDisabledQueries;
                                   },
+                                  "aria-label": "Hide disabled queries setting",
                                   onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
                                   get children() {
                                     return [createComponent(dropdown_menu_exports.RadioItem, {
@@ -13768,33 +13814,33 @@ var init_Devtools = __esm({
           }
         }), null);
         createRenderEffect((_p$) => {
-          var _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
+          var _v$9 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
               height: 50%;
               max-height: 50%;
             `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
               height: 100%;
               max-height: 100%;
-            `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$0 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$1 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$10 = clsx(styles().row, "tsqd-filters-actions-container"), _v$11 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$12 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$13 = clsx("tsqd-query-filter-textfield"), _v$14 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$16 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$17 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = `Clear ${selectedView()} cache`, _v$20 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$21 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$22 = offline(), _v$23 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
-          _v$6 !== _p$.e && className(_el$0, _p$.e = _v$6);
-          _v$7 !== _p$.t && className(_el$1, _p$.t = _v$7);
-          _v$8 !== _p$.a && className(_el$10, _p$.a = _v$8);
-          _v$9 !== _p$.o && className(_el$11, _p$.o = _v$9);
-          _v$0 !== _p$.i && className(_el$12, _p$.i = _v$0);
-          _v$1 !== _p$.n && className(_el$13, _p$.n = _v$1);
-          _v$10 !== _p$.s && className(_el$15, _p$.s = _v$10);
-          _v$11 !== _p$.h && className(_el$16, _p$.h = _v$11);
-          _v$12 !== _p$.r && className(_el$17, _p$.r = _v$12);
-          _v$13 !== _p$.d && className(_el$18, _p$.d = _v$13);
-          _v$14 !== _p$.l && className(_el$19, _p$.l = _v$14);
-          _v$15 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$15);
-          _v$16 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$16);
-          _v$17 !== _p$.w && className(_el$25, _p$.w = _v$17);
-          _v$18 !== _p$.m && className(_el$26, _p$.m = _v$18);
-          _v$19 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$19);
-          _v$20 !== _p$.y && className(_el$27, _p$.y = _v$20);
-          _v$21 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$21);
-          _v$22 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$22);
-          _v$23 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$23);
+            `, "tsqd-queries-container"), _v$0 = clsx(styles().row, "tsqd-header"), _v$1 = styles().logoAndToggleContainer, _v$10 = clsx(styles().logo, "tsqd-text-logo-container"), _v$11 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$12 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$13 = clsx(styles().row, "tsqd-filters-actions-container"), _v$14 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$15 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$16 = clsx("tsqd-query-filter-textfield"), _v$17 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$18 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$19 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$20 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$21 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$22 = `Clear ${selectedView()} cache`, _v$23 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$25 = offline(), _v$26 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
+          _v$9 !== _p$.e && className(_el$0, _p$.e = _v$9);
+          _v$0 !== _p$.t && className(_el$1, _p$.t = _v$0);
+          _v$1 !== _p$.a && className(_el$10, _p$.a = _v$1);
+          _v$10 !== _p$.o && className(_el$11, _p$.o = _v$10);
+          _v$11 !== _p$.i && className(_el$12, _p$.i = _v$11);
+          _v$12 !== _p$.n && className(_el$13, _p$.n = _v$12);
+          _v$13 !== _p$.s && className(_el$15, _p$.s = _v$13);
+          _v$14 !== _p$.h && className(_el$16, _p$.h = _v$14);
+          _v$15 !== _p$.r && className(_el$17, _p$.r = _v$15);
+          _v$16 !== _p$.d && className(_el$18, _p$.d = _v$16);
+          _v$17 !== _p$.l && className(_el$19, _p$.l = _v$17);
+          _v$18 !== _p$.u && setAttribute(_el$22, "aria-label", _p$.u = _v$18);
+          _v$19 !== _p$.c && setAttribute(_el$22, "aria-pressed", _p$.c = _v$19);
+          _v$20 !== _p$.w && className(_el$25, _p$.w = _v$20);
+          _v$21 !== _p$.m && className(_el$26, _p$.m = _v$21);
+          _v$22 !== _p$.f && setAttribute(_el$26, "title", _p$.f = _v$22);
+          _v$23 !== _p$.y && className(_el$27, _p$.y = _v$23);
+          _v$24 !== _p$.g && setAttribute(_el$27, "aria-label", _p$.g = _v$24);
+          _v$25 !== _p$.p && setAttribute(_el$27, "aria-pressed", _p$.p = _v$25);
+          _v$26 !== _p$.b && setAttribute(_el$27, "title", _p$.b = _v$26);
           return _p$;
         }, {
           e: void 0,
@@ -13907,10 +13953,10 @@ var init_Devtools = __esm({
             }
           }), 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$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);
+            var _v$27 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$28 = `Query key ${props.query.queryHash}${isDisabled() ? ", disabled" : ""}${isStatic() ? ", static" : ""}`, _v$29 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
+            _v$27 !== _p$.e && className(_el$50, _p$.e = _v$27);
+            _v$28 !== _p$.t && setAttribute(_el$50, "aria-label", _p$.t = _v$28);
+            _v$29 !== _p$.a && className(_el$51, _p$.a = _v$29);
             return _p$;
           }, {
             e: void 0,
@@ -14018,10 +14064,10 @@ var init_Devtools = __esm({
           }), 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$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);
+            var _v$30 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$31 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$32 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
+            _v$30 !== _p$.e && className(_el$55, _p$.e = _v$30);
+            _v$31 !== _p$.t && setAttribute(_el$55, "aria-label", _p$.t = _v$31);
+            _v$32 !== _p$.a && className(_el$56, _p$.a = _v$32);
             return _p$;
           }, {
             e: void 0,
@@ -14173,8 +14219,8 @@ var init_Devtools = __esm({
       });
       return (() => {
         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$60) : tagRef = _el$60;
+        var _ref$6 = tagRef;
+        typeof _ref$6 === "function" ? use(_ref$6, _el$60) : tagRef = _el$60;
         _el$60.addEventListener("mouseleave", () => {
           setMouseOver(false);
           setFocused(false);
@@ -14186,6 +14232,9 @@ var init_Devtools = __esm({
           get disabled() {
             return showLabel();
           },
+          get ["aria-label"]() {
+            return `${props.label}: ${props.count}`;
+          },
           get ["class"]() {
             return clsx(styles().queryStatusTag, !showLabel() && css`
             cursor: pointer;
@@ -14221,17 +14270,17 @@ var init_Devtools = __esm({
         }), _el$64);
         insert(_el$64, () => props.count);
         createRenderEffect((_p$) => {
-          var _v$30 = clsx(css`
+          var _v$33 = clsx(css`
             width: ${tokens.size[1.5]};
             height: ${tokens.size[1.5]};
             border-radius: ${tokens.border.radius.full};
             background-color: ${tokens.colors[props.color][500]};
-          `, "tsqd-query-status-tag-dot"), _v$31 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
+          `, "tsqd-query-status-tag-dot"), _v$34 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
               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$62, _p$.e = _v$30);
-          _v$31 !== _p$.t && className(_el$64, _p$.t = _v$31);
+          _v$33 !== _p$.e && className(_el$62, _p$.e = _v$33);
+          _v$34 !== _p$.t && className(_el$64, _p$.t = _v$34);
           return _p$;
         }, {
           e: void 0,
@@ -14301,6 +14350,7 @@ var init_Devtools = __esm({
         const error = errorType?.initializer(activeQueryVal) ?? new Error("Unknown error from devtools");
         const __previousQueryOptions = activeQueryVal.options;
         activeQueryVal.setState({
+          data: void 0,
           status: "error",
           error,
           fetchMeta: {
@@ -14432,14 +14482,14 @@ var init_Devtools = __esm({
               };
               insert(_el$91, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$93);
               createRenderEffect((_p$) => {
-                var _v$32 = clsx(css`
+                var _v$35 = 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`
+                `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$36 = queryStatus() === "pending", _v$37 = css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
-                _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);
+                _v$35 !== _p$.e && className(_el$91, _p$.e = _v$35);
+                _v$36 !== _p$.t && (_el$91.disabled = _p$.t = _v$36);
+                _v$37 !== _p$.a && className(_el$92, _p$.a = _v$37);
                 return _p$;
               }, {
                 e: void 0,
@@ -14472,12 +14522,12 @@ var init_Devtools = __esm({
               }), 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`
+                var _v$38 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$39 = css`
                   background-color: ${tokens.colors.red[400]};
-                `, _v$37 = queryStatus() === "pending";
-                _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);
+                `, _v$40 = queryStatus() === "pending";
+                _v$38 !== _p$.e && className(_el$94, _p$.e = _v$38);
+                _v$39 !== _p$.t && className(_el$95, _p$.t = _v$39);
+                _v$40 !== _p$.a && (_el$97.disabled = _p$.a = _v$40);
                 return _p$;
               }, {
                 e: void 0,
@@ -14535,19 +14585,19 @@ var init_Devtools = __esm({
               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`
+                var _v$41 = clsx(styles().devtoolsEditForm, "tsqd-query-details-data-editor"), _v$42 = styles().devtoolsEditTextarea, _v$43 = dataEditError(), _v$44 = styles().devtoolsEditFormActions, _v$45 = styles().devtoolsEditFormError, _v$46 = styles().devtoolsEditFormActionContainer, _v$47 = clsx(styles().devtoolsEditFormAction, css`
                       color: ${t2(colors.gray[600], colors.gray[300])};
-                    `), _v$45 = clsx(styles().devtoolsEditFormAction, css`
+                    `), _v$48 = clsx(styles().devtoolsEditFormAction, css`
                       color: ${t2(colors.blue[600], colors.blue[400])};
                     `);
-                _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);
+                _v$41 !== _p$.e && className(_el$102, _p$.e = _v$41);
+                _v$42 !== _p$.t && className(_el$103, _p$.t = _v$42);
+                _v$43 !== _p$.a && setAttribute(_el$103, "data-error", _p$.a = _v$43);
+                _v$44 !== _p$.o && className(_el$104, _p$.o = _v$44);
+                _v$45 !== _p$.i && className(_el$105, _p$.i = _v$45);
+                _v$46 !== _p$.n && className(_el$106, _p$.n = _v$46);
+                _v$47 !== _p$.s && className(_el$107, _p$.s = _v$47);
+                _v$48 !== _p$.h && className(_el$108, _p$.h = _v$48);
                 return _p$;
               }, {
                 e: void 0,
@@ -14571,51 +14621,51 @@ var init_Devtools = __esm({
             }
           }));
           createRenderEffect((_p$) => {
-            var _v$46 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$47 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$48 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$49 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$50 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$51 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$52 = clsx(css`
+            var _v$49 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$50 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$51 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$52 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$53 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$54 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$55 = clsx(css`
                 color: ${t2(colors.blue[600], colors.blue[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$53 = statusLabel() === "fetching", _v$54 = css`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$56 = statusLabel() === "fetching", _v$57 = css`
                 background-color: ${t2(colors.blue[600], colors.blue[400])};
-              `, _v$55 = clsx(css`
+              `, _v$58 = clsx(css`
                 color: ${t2(colors.yellow[600], colors.yellow[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$56 = queryStatus() === "pending", _v$57 = css`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$59 = queryStatus() === "pending", _v$60 = css`
                 background-color: ${t2(colors.yellow[600], colors.yellow[400])};
-              `, _v$58 = clsx(css`
+              `, _v$61 = clsx(css`
                 color: ${t2(colors.gray[600], colors.gray[300])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$59 = queryStatus() === "pending", _v$60 = css`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$62 = queryStatus() === "pending", _v$63 = css`
                 background-color: ${t2(colors.gray[600], colors.gray[400])};
-              `, _v$61 = clsx(css`
+              `, _v$64 = clsx(css`
                 color: ${t2(colors.pink[500], colors.pink[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$62 = statusLabel() === "fetching", _v$63 = css`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$65 = statusLabel() === "fetching", _v$66 = css`
                 background-color: ${t2(colors.pink[500], colors.pink[400])};
-              `, _v$64 = clsx(css`
+              `, _v$67 = clsx(css`
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$65 = restoringLoading(), _v$66 = css`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$68 = restoringLoading(), _v$69 = 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$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"));
+              `, _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$72 = tokens.size[2];
+            _v$49 !== _p$.e && className(_el$65, _p$.e = _v$49);
+            _v$50 !== _p$.t && className(_el$66, _p$.t = _v$50);
+            _v$51 !== _p$.a && className(_el$67, _p$.a = _v$51);
+            _v$52 !== _p$.o && className(_el$71, _p$.o = _v$52);
+            _v$53 !== _p$.i && className(_el$78, _p$.i = _v$53);
+            _v$54 !== _p$.n && className(_el$79, _p$.n = _v$54);
+            _v$55 !== _p$.s && className(_el$80, _p$.s = _v$55);
+            _v$56 !== _p$.h && (_el$80.disabled = _p$.h = _v$56);
+            _v$57 !== _p$.r && className(_el$81, _p$.r = _v$57);
+            _v$58 !== _p$.d && className(_el$82, _p$.d = _v$58);
+            _v$59 !== _p$.l && (_el$82.disabled = _p$.l = _v$59);
+            _v$60 !== _p$.u && className(_el$83, _p$.u = _v$60);
+            _v$61 !== _p$.c && className(_el$84, _p$.c = _v$61);
+            _v$62 !== _p$.w && (_el$84.disabled = _p$.w = _v$62);
+            _v$63 !== _p$.m && className(_el$85, _p$.m = _v$63);
+            _v$64 !== _p$.f && className(_el$86, _p$.f = _v$64);
+            _v$65 !== _p$.y && (_el$86.disabled = _p$.y = _v$65);
+            _v$66 !== _p$.g && className(_el$87, _p$.g = _v$66);
+            _v$67 !== _p$.p && className(_el$88, _p$.p = _v$67);
+            _v$68 !== _p$.b && (_el$88.disabled = _p$.b = _v$68);
+            _v$69 !== _p$.T && className(_el$89, _p$.T = _v$69);
+            _v$70 !== _p$.A && className(_el$99, _p$.A = _v$70);
+            _v$71 !== _p$.O && className(_el$109, _p$.O = _v$71);
+            _v$72 !== _p$.I && ((_p$.I = _v$72) != null ? _el$110.style.setProperty("padding", _v$72) : _el$110.style.removeProperty("padding"));
             return _p$;
           }, {
             e: void 0,
@@ -14749,19 +14799,19 @@ 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$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"));
+            var _v$73 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$76 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$77 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$78 = tokens.size[2], _v$79 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$80 = tokens.size[2], _v$81 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$82 = tokens.size[2], _v$83 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$84 = tokens.size[2];
+            _v$73 !== _p$.e && className(_el$112, _p$.e = _v$73);
+            _v$74 !== _p$.t && className(_el$113, _p$.t = _v$74);
+            _v$75 !== _p$.a && className(_el$114, _p$.a = _v$75);
+            _v$76 !== _p$.o && className(_el$118, _p$.o = _v$76);
+            _v$77 !== _p$.i && className(_el$122, _p$.i = _v$77);
+            _v$78 !== _p$.n && ((_p$.n = _v$78) != null ? _el$123.style.setProperty("padding", _v$78) : _el$123.style.removeProperty("padding"));
+            _v$79 !== _p$.s && className(_el$124, _p$.s = _v$79);
+            _v$80 !== _p$.h && ((_p$.h = _v$80) != null ? _el$125.style.setProperty("padding", _v$80) : _el$125.style.removeProperty("padding"));
+            _v$81 !== _p$.r && className(_el$126, _p$.r = _v$81);
+            _v$82 !== _p$.d && ((_p$.d = _v$82) != null ? _el$127.style.setProperty("padding", _v$82) : _el$127.style.removeProperty("padding"));
+            _v$83 !== _p$.l && className(_el$128, _p$.l = _v$83);
+            _v$84 !== _p$.u && ((_p$.u = _v$84) != null ? _el$129.style.setProperty("padding", _v$84) : _el$129.style.removeProperty("padding"));
             return _p$;
           }, {
             e: void 0,
@@ -15166,6 +15216,15 @@ var init_Devtools = __esm({
       &:hover {
         background-color: ${colors.purple[400]}${t2("", alpha[90])};
       }
+      &:focus {
+        outline: none;
+        background-color: ${colors.purple[400]}${t2("", alpha[90])};
+      }
+      &:focus-visible {
+        outline: 2px solid ${colors.blue[800]};
+        outline-offset: -2px;
+        background-color: ${colors.purple[400]}${t2("", alpha[90])};
+      }
       z-index: 4;
     `,
         "dragHandle-position-top": css`
@@ -15918,7 +15977,7 @@ var init_Devtools = __esm({
     };
     lightStyles2 = (css) => stylesFactory2("light", css);
     darkStyles2 = (css) => stylesFactory2("dark", css);
-    delegateEvents(["click", "mousedown", "input"]);
+    delegateEvents(["click", "mousedown", "keydown", "input"]);
   }
 });