@tanstack/query-devtools 5.76.0 → 5.80.0

package/build/index.cjs

@@ -12898,7 +12898,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, 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, 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();
@@ -12950,17 +12950,18 @@ var init_Devtools = __esm({
     _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(`<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$262 = /* @__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 class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
-    _tmpl$29 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
-    _tmpl$30 = /* @__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$31 = /* @__PURE__ */ template(`<option>`);
-    _tmpl$322 = /* @__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$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">`);
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
@@ -13883,6 +13884,9 @@ var init_Devtools = __esm({
       const isDisabled = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
       })?.isDisabled() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
+      const isStatic = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
+        queryKey: props.query.queryKey
+      })?.isStatic() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
       const isStale = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().find({
         queryKey: props.query.queryKey
       })?.isStale() ?? false, true, (e2) => e2.query.queryHash === props.query.queryHash);
@@ -13911,7 +13915,7 @@ var init_Devtools = __esm({
           return queryState();
         },
         get children() {
-          var _el$47 = _tmpl$222(), _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling;
+          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);
@@ -13923,6 +13927,14 @@ var init_Devtools = __esm({
               return _tmpl$212();
             }
           }), null);
+          insert(_el$47, createComponent(Show, {
+            get when() {
+              return isStatic();
+            },
+            get children() {
+              return _tmpl$222();
+            }
+          }), 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);
@@ -13989,11 +14001,11 @@ var init_Devtools = __esm({
           return mutationState();
         },
         get children() {
-          var _el$51 = _tmpl$222(), _el$52 = _el$51.firstChild, _el$53 = _el$52.nextSibling;
-          _el$51.$$click = () => {
+          var _el$52 = _tmpl$232(), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
+          _el$52.$$click = () => {
             setSelectedMutationId(props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId);
           };
-          insert(_el$52, createComponent(Show, {
+          insert(_el$53, createComponent(Show, {
             get when() {
               return color() === "purple";
             },
@@ -14001,7 +14013,7 @@ var init_Devtools = __esm({
               return createComponent(PauseCircle, {});
             }
           }), null);
-          insert(_el$52, createComponent(Show, {
+          insert(_el$53, createComponent(Show, {
             get when() {
               return color() === "green";
             },
@@ -14009,7 +14021,7 @@ var init_Devtools = __esm({
               return createComponent(CheckCircle, {});
             }
           }), null);
-          insert(_el$52, createComponent(Show, {
+          insert(_el$53, createComponent(Show, {
             get when() {
               return color() === "red";
             },
@@ -14017,7 +14029,7 @@ var init_Devtools = __esm({
               return createComponent(XCircle, {});
             }
           }), null);
-          insert(_el$52, createComponent(Show, {
+          insert(_el$53, createComponent(Show, {
             get when() {
               return color() === "yellow";
             },
@@ -14025,7 +14037,7 @@ var init_Devtools = __esm({
               return createComponent(LoadingCircle, {});
             }
           }), null);
-          insert(_el$53, createComponent(Show, {
+          insert(_el$54, createComponent(Show, {
             get when() {
               return props.mutation.options.mutationKey;
             },
@@ -14033,19 +14045,19 @@ var init_Devtools = __esm({
               return [createMemo(() => JSON.stringify(props.mutation.options.mutationKey)), " -", " "];
             }
           }), null);
-          insert(_el$53, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
+          insert(_el$54, () => 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$51, _p$.e = _v$27);
-            _v$28 !== _p$.t && setAttribute(_el$51, "aria-label", _p$.t = _v$28);
-            _v$29 !== _p$.a && className(_el$52, _p$.a = _v$29);
+            _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);
             return _p$;
           }, {
             e: void 0,
             t: void 0,
             a: void 0
           });
-          return _el$51;
+          return _el$52;
         }
       });
     };
@@ -14063,44 +14075,44 @@ var init_Devtools = __esm({
         return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       return (() => {
-        var _el$54 = _tmpl$26();
-        insert(_el$54, createComponent(QueryStatus, {
+        var _el$55 = _tmpl$26();
+        insert(_el$55, createComponent(QueryStatus, {
           label: "Fresh",
           color: "green",
           get count() {
             return fresh();
           }
         }), null);
-        insert(_el$54, createComponent(QueryStatus, {
+        insert(_el$55, createComponent(QueryStatus, {
           label: "Fetching",
           color: "blue",
           get count() {
             return fetching();
           }
         }), null);
-        insert(_el$54, createComponent(QueryStatus, {
+        insert(_el$55, createComponent(QueryStatus, {
           label: "Paused",
           color: "purple",
           get count() {
             return paused();
           }
         }), null);
-        insert(_el$54, createComponent(QueryStatus, {
+        insert(_el$55, createComponent(QueryStatus, {
           label: "Stale",
           color: "yellow",
           get count() {
             return stale();
           }
         }), null);
-        insert(_el$54, createComponent(QueryStatus, {
+        insert(_el$55, createComponent(QueryStatus, {
           label: "Inactive",
           color: "gray",
           get count() {
             return inactive();
           }
         }), null);
-        createRenderEffect(() => className(_el$54, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-        return _el$54;
+        createRenderEffect(() => className(_el$55, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+        return _el$55;
       })();
     };
     MutationStatusCount = () => {
@@ -14128,37 +14140,37 @@ var init_Devtools = __esm({
         return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       return (() => {
-        var _el$55 = _tmpl$26();
-        insert(_el$55, createComponent(QueryStatus, {
+        var _el$56 = _tmpl$26();
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Paused",
           color: "purple",
           get count() {
             return paused();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Pending",
           color: "yellow",
           get count() {
             return pending();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Success",
           color: "green",
           get count() {
             return success();
           }
         }), null);
-        insert(_el$55, createComponent(QueryStatus, {
+        insert(_el$56, createComponent(QueryStatus, {
           label: "Error",
           color: "red",
           get count() {
             return error();
           }
         }), null);
-        createRenderEffect(() => className(_el$55, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-        return _el$55;
+        createRenderEffect(() => className(_el$56, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+        return _el$56;
       })();
     };
     QueryStatus = (props) => {
@@ -14189,17 +14201,17 @@ var init_Devtools = __esm({
         return true;
       });
       return (() => {
-        var _el$56 = _tmpl$252(), _el$58 = _el$56.firstChild, _el$60 = _el$58.nextSibling;
+        var _el$57 = _tmpl$262(), _el$59 = _el$57.firstChild, _el$61 = _el$59.nextSibling;
         var _ref$5 = tagRef;
-        typeof _ref$5 === "function" ? use(_ref$5, _el$56) : tagRef = _el$56;
-        _el$56.addEventListener("mouseleave", () => {
+        typeof _ref$5 === "function" ? use(_ref$5, _el$57) : tagRef = _el$57;
+        _el$57.addEventListener("mouseleave", () => {
           setMouseOver(false);
           setFocused(false);
         });
-        _el$56.addEventListener("mouseenter", () => setMouseOver(true));
-        _el$56.addEventListener("blur", () => setFocused(false));
-        _el$56.addEventListener("focus", () => setFocused(true));
-        spread(_el$56, mergeProps({
+        _el$57.addEventListener("mouseenter", () => setMouseOver(true));
+        _el$57.addEventListener("blur", () => setFocused(false));
+        _el$57.addEventListener("focus", () => setFocused(true));
+        spread(_el$57, mergeProps({
           get disabled() {
             return showLabel();
           },
@@ -14214,29 +14226,29 @@ var init_Devtools = __esm({
         }, () => mouseOver() || focused() ? {
           "aria-describedby": "tsqd-status-tooltip"
         } : {}), false, true);
-        insert(_el$56, createComponent(Show, {
+        insert(_el$57, createComponent(Show, {
           get when() {
             return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
           },
           get children() {
-            var _el$57 = _tmpl$232();
-            insert(_el$57, () => props.label);
-            createRenderEffect(() => className(_el$57, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
-            return _el$57;
+            var _el$58 = _tmpl$242();
+            insert(_el$58, () => props.label);
+            createRenderEffect(() => className(_el$58, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
+            return _el$58;
           }
-        }), _el$58);
-        insert(_el$56, createComponent(Show, {
+        }), _el$59);
+        insert(_el$57, createComponent(Show, {
           get when() {
             return showLabel();
           },
           get children() {
-            var _el$59 = _tmpl$242();
-            insert(_el$59, () => props.label);
-            createRenderEffect(() => className(_el$59, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
-            return _el$59;
+            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;
           }
-        }), _el$60);
-        insert(_el$60, () => props.count);
+        }), _el$61);
+        insert(_el$61, () => props.count);
         createRenderEffect((_p$) => {
           var _v$30 = clsx(css`
             width: ${tokens.size[1.5]};
@@ -14247,14 +14259,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$58, _p$.e = _v$30);
-          _v$31 !== _p$.t && className(_el$60, _p$.t = _v$31);
+          _v$30 !== _p$.e && className(_el$59, _p$.e = _v$30);
+          _v$31 !== _p$.t && className(_el$61, _p$.t = _v$31);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$56;
+        return _el$57;
       })();
     };
     QueryDetails = () => {
@@ -14371,27 +14383,27 @@ var init_Devtools = __esm({
           return createMemo(() => !!activeQuery())() && activeQueryState();
         },
         get children() {
-          var _el$61 = _tmpl$30(), _el$62 = _el$61.firstChild, _el$63 = _el$62.nextSibling, _el$64 = _el$63.firstChild, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$64.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling, _el$71 = _el$68.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$63.nextSibling, _el$75 = _el$74.nextSibling, _el$76 = _el$75.firstChild, _el$77 = _el$76.firstChild, _el$78 = _el$76.nextSibling, _el$79 = _el$78.firstChild, _el$80 = _el$78.nextSibling, _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$85.nextSibling, _el$95 = _el$75.nextSibling; _el$95.firstChild; var _el$105 = _el$95.nextSibling, _el$106 = _el$105.nextSibling;
-          insert(_el$66, () => displayValue(activeQuery().queryKey, true));
-          insert(_el$67, statusLabel);
-          insert(_el$70, observerCount);
-          insert(_el$73, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
-          _el$76.$$click = handleRefetch;
-          _el$78.$$click = () => {
+          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 = () => {
             sendDevToolsEvent({
               type: "INVALIDATE",
               queryHash: activeQuery()?.queryHash
             });
             queryClient.invalidateQueries(activeQuery());
           };
-          _el$80.$$click = () => {
+          _el$81.$$click = () => {
             sendDevToolsEvent({
               type: "RESET",
               queryHash: activeQuery()?.queryHash
             });
             queryClient.resetQueries(activeQuery());
           };
-          _el$82.$$click = () => {
+          _el$83.$$click = () => {
             sendDevToolsEvent({
               type: "REMOVE",
               queryHash: activeQuery()?.queryHash
@@ -14399,7 +14411,7 @@ var init_Devtools = __esm({
             queryClient.removeQueries(activeQuery());
             setSelectedQueryHash(null);
           };
-          _el$84.$$click = () => {
+          _el$85.$$click = () => {
             if (activeQuery()?.state.data === void 0) {
               setRestoringLoading(true);
               restoreQueryAfterLoadingOrError();
@@ -14429,14 +14441,14 @@ var init_Devtools = __esm({
               });
             }
           };
-          insert(_el$84, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$86);
-          insert(_el$75, createComponent(Show, {
+          insert(_el$85, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$87);
+          insert(_el$76, createComponent(Show, {
             get when() {
               return errorTypes().length === 0 || queryStatus() === "error";
             },
             get children() {
-              var _el$87 = _tmpl$262(), _el$88 = _el$87.firstChild, _el$89 = _el$88.nextSibling;
-              _el$87.$$click = () => {
+              var _el$88 = _tmpl$27(), _el$89 = _el$88.firstChild, _el$90 = _el$89.nextSibling;
+              _el$88.$$click = () => {
                 if (!activeQuery().state.error) {
                   triggerError();
                 } else {
@@ -14447,71 +14459,71 @@ var init_Devtools = __esm({
                   queryClient.resetQueries(activeQuery());
                 }
               };
-              insert(_el$87, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$89);
+              insert(_el$88, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$90);
               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$87, _p$.e = _v$32);
-                _v$33 !== _p$.t && (_el$87.disabled = _p$.t = _v$33);
-                _v$34 !== _p$.a && className(_el$88, _p$.a = _v$34);
+                _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);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
               });
-              return _el$87;
+              return _el$88;
             }
           }), null);
-          insert(_el$75, createComponent(Show, {
+          insert(_el$76, createComponent(Show, {
             get when() {
               return !(errorTypes().length === 0 || queryStatus() === "error");
             },
             get children() {
-              var _el$90 = _tmpl$27(), _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling, _el$93 = _el$92.nextSibling; _el$93.firstChild;
-              _el$93.addEventListener("change", (e2) => {
+              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) => {
                 const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
                 triggerError(errorType);
               });
-              insert(_el$93, createComponent(For, {
+              insert(_el$94, createComponent(For, {
                 get each() {
                   return errorTypes();
                 },
                 children: (errorType) => (() => {
-                  var _el$107 = _tmpl$31();
-                  insert(_el$107, () => errorType.name);
-                  createRenderEffect(() => _el$107.value = errorType.name);
-                  return _el$107;
+                  var _el$108 = _tmpl$322();
+                  insert(_el$108, () => errorType.name);
+                  createRenderEffect(() => _el$108.value = errorType.name);
+                  return _el$108;
                 })()
               }), null);
-              insert(_el$90, createComponent(ChevronDown, {}), null);
+              insert(_el$91, 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$90, _p$.e = _v$35);
-                _v$36 !== _p$.t && className(_el$91, _p$.t = _v$36);
-                _v$37 !== _p$.a && (_el$93.disabled = _p$.a = _v$37);
+                _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);
                 return _p$;
               }, {
                 e: void 0,
                 t: void 0,
                 a: void 0
               });
-              return _el$90;
+              return _el$91;
             }
           }), null);
-          insert(_el$95, () => dataMode() === "view" ? "Explorer" : "Editor", null);
-          insert(_el$61, createComponent(Show, {
+          insert(_el$96, () => dataMode() === "view" ? "Explorer" : "Editor", null);
+          insert(_el$62, createComponent(Show, {
             get when() {
               return dataMode() === "view";
             },
             get children() {
-              var _el$97 = _tmpl$28();
-              insert(_el$97, createComponent(Explorer, {
+              var _el$98 = _tmpl$29();
+              insert(_el$98, createComponent(Explorer, {
                 label: "Data",
                 defaultExpanded: ["Data"],
                 get value() {
@@ -14523,17 +14535,17 @@ var init_Devtools = __esm({
                   return activeQuery();
                 }
               }));
-              createRenderEffect((_$p) => (_$p = tokens.size[2]) != null ? _el$97.style.setProperty("padding", _$p) : _el$97.style.removeProperty("padding"));
-              return _el$97;
+              createRenderEffect((_$p) => (_$p = tokens.size[2]) != null ? _el$98.style.setProperty("padding", _$p) : _el$98.style.removeProperty("padding"));
+              return _el$98;
             }
-          }), _el$105);
-          insert(_el$61, createComponent(Show, {
+          }), _el$106);
+          insert(_el$62, createComponent(Show, {
             get when() {
               return dataMode() === "edit";
             },
             get children() {
-              var _el$98 = _tmpl$29(), _el$99 = _el$98.firstChild, _el$100 = _el$99.nextSibling, _el$101 = _el$100.firstChild, _el$102 = _el$101.nextSibling, _el$103 = _el$102.firstChild, _el$104 = _el$103.nextSibling;
-              _el$98.addEventListener("submit", (e2) => {
+              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) => {
                 e2.preventDefault();
                 const formData = new FormData(e2.currentTarget);
                 const data = formData.get("data");
@@ -14548,23 +14560,23 @@ var init_Devtools = __esm({
                   setDataEditError(true);
                 }
               });
-              _el$99.addEventListener("focus", () => setDataEditError(false));
-              insert(_el$101, () => dataEditError() ? "Invalid Value" : "");
-              _el$103.$$click = () => setDataMode("view");
+              _el$100.addEventListener("focus", () => setDataEditError(false));
+              insert(_el$102, () => dataEditError() ? "Invalid Value" : "");
+              _el$104.$$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$98, _p$.e = _v$38);
-                _v$39 !== _p$.t && className(_el$99, _p$.t = _v$39);
-                _v$40 !== _p$.a && setAttribute(_el$99, "data-error", _p$.a = _v$40);
-                _v$41 !== _p$.o && className(_el$100, _p$.o = _v$41);
-                _v$42 !== _p$.i && className(_el$101, _p$.i = _v$42);
-                _v$43 !== _p$.n && className(_el$102, _p$.n = _v$43);
-                _v$44 !== _p$.s && className(_el$103, _p$.s = _v$44);
-                _v$45 !== _p$.h && className(_el$104, _p$.h = _v$45);
+                _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);
                 return _p$;
               }, {
                 e: void 0,
@@ -14576,11 +14588,11 @@ var init_Devtools = __esm({
                 s: void 0,
                 h: void 0
               });
-              createRenderEffect(() => _el$99.value = JSON.stringify(activeQueryStateData(), null, 2));
-              return _el$98;
+              createRenderEffect(() => _el$100.value = JSON.stringify(activeQueryStateData(), null, 2));
+              return _el$99;
             }
-          }), _el$105);
-          insert(_el$106, createComponent(Explorer, {
+          }), _el$106);
+          insert(_el$107, createComponent(Explorer, {
             label: "Query",
             defaultExpanded: ["Query", "queryKey"],
             get value() {
@@ -14609,30 +14621,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$61, _p$.e = _v$46);
-            _v$47 !== _p$.t && className(_el$62, _p$.t = _v$47);
-            _v$48 !== _p$.a && className(_el$63, _p$.a = _v$48);
-            _v$49 !== _p$.o && className(_el$67, _p$.o = _v$49);
-            _v$50 !== _p$.i && className(_el$74, _p$.i = _v$50);
-            _v$51 !== _p$.n && className(_el$75, _p$.n = _v$51);
-            _v$52 !== _p$.s && className(_el$76, _p$.s = _v$52);
-            _v$53 !== _p$.h && (_el$76.disabled = _p$.h = _v$53);
-            _v$54 !== _p$.r && className(_el$77, _p$.r = _v$54);
-            _v$55 !== _p$.d && className(_el$78, _p$.d = _v$55);
-            _v$56 !== _p$.l && (_el$78.disabled = _p$.l = _v$56);
-            _v$57 !== _p$.u && className(_el$79, _p$.u = _v$57);
-            _v$58 !== _p$.c && className(_el$80, _p$.c = _v$58);
-            _v$59 !== _p$.w && (_el$80.disabled = _p$.w = _v$59);
-            _v$60 !== _p$.m && className(_el$81, _p$.m = _v$60);
-            _v$61 !== _p$.f && className(_el$82, _p$.f = _v$61);
-            _v$62 !== _p$.y && (_el$82.disabled = _p$.y = _v$62);
-            _v$63 !== _p$.g && className(_el$83, _p$.g = _v$63);
-            _v$64 !== _p$.p && className(_el$84, _p$.p = _v$64);
-            _v$65 !== _p$.b && (_el$84.disabled = _p$.b = _v$65);
-            _v$66 !== _p$.T && className(_el$85, _p$.T = _v$66);
-            _v$67 !== _p$.A && className(_el$95, _p$.A = _v$67);
-            _v$68 !== _p$.O && className(_el$105, _p$.O = _v$68);
-            _v$69 !== _p$.I && ((_p$.I = _v$69) != null ? _el$106.style.setProperty("padding", _v$69) : _el$106.style.removeProperty("padding"));
+            _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"));
             return _p$;
           }, {
             e: void 0,
@@ -14660,7 +14672,7 @@ var init_Devtools = __esm({
             O: void 0,
             I: void 0
           });
-          return _el$61;
+          return _el$62;
         }
       });
     };
@@ -14712,8 +14724,8 @@ var init_Devtools = __esm({
           return activeMutation();
         },
         get children() {
-          var _el$108 = _tmpl$322(), _el$109 = _el$108.firstChild, _el$110 = _el$109.nextSibling, _el$111 = _el$110.firstChild, _el$112 = _el$111.firstChild, _el$113 = _el$112.firstChild, _el$114 = _el$112.nextSibling, _el$115 = _el$111.nextSibling, _el$116 = _el$115.firstChild, _el$117 = _el$116.nextSibling, _el$118 = _el$110.nextSibling, _el$119 = _el$118.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;
-          insert(_el$113, createComponent(Show, {
+          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, {
             get when() {
               return activeMutation().options.mutationKey;
             },
@@ -14722,13 +14734,13 @@ var init_Devtools = __esm({
               return displayValue(activeMutation().options.mutationKey, true);
             }
           }));
-          insert(_el$114, createComponent(Show, {
+          insert(_el$115, createComponent(Show, {
             get when() {
               return color() === "purple";
             },
             children: "pending"
           }), null);
-          insert(_el$114, createComponent(Show, {
+          insert(_el$115, createComponent(Show, {
             get when() {
               return color() !== "purple";
             },
@@ -14736,29 +14748,29 @@ var init_Devtools = __esm({
               return status();
             }
           }), null);
-          insert(_el$117, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
-          insert(_el$119, createComponent(Explorer, {
+          insert(_el$118, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
+          insert(_el$120, createComponent(Explorer, {
             label: "Variables",
             defaultExpanded: ["Variables"],
             get value() {
               return activeMutation().state.variables;
             }
           }));
-          insert(_el$121, createComponent(Explorer, {
+          insert(_el$122, createComponent(Explorer, {
             label: "Context",
             defaultExpanded: ["Context"],
             get value() {
               return activeMutation().state.context;
             }
           }));
-          insert(_el$123, createComponent(Explorer, {
+          insert(_el$124, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
             get value() {
               return activeMutation().state.data;
             }
           }));
-          insert(_el$125, createComponent(Explorer, {
+          insert(_el$126, createComponent(Explorer, {
             label: "Mutation",
             defaultExpanded: ["Mutation"],
             get value() {
@@ -14767,18 +14779,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$108, _p$.e = _v$70);
-            _v$71 !== _p$.t && className(_el$109, _p$.t = _v$71);
-            _v$72 !== _p$.a && className(_el$110, _p$.a = _v$72);
-            _v$73 !== _p$.o && className(_el$114, _p$.o = _v$73);
-            _v$74 !== _p$.i && className(_el$118, _p$.i = _v$74);
-            _v$75 !== _p$.n && ((_p$.n = _v$75) != null ? _el$119.style.setProperty("padding", _v$75) : _el$119.style.removeProperty("padding"));
-            _v$76 !== _p$.s && className(_el$120, _p$.s = _v$76);
-            _v$77 !== _p$.h && ((_p$.h = _v$77) != null ? _el$121.style.setProperty("padding", _v$77) : _el$121.style.removeProperty("padding"));
-            _v$78 !== _p$.r && className(_el$122, _p$.r = _v$78);
-            _v$79 !== _p$.d && ((_p$.d = _v$79) != null ? _el$123.style.setProperty("padding", _v$79) : _el$123.style.removeProperty("padding"));
-            _v$80 !== _p$.l && className(_el$124, _p$.l = _v$80);
-            _v$81 !== _p$.u && ((_p$.u = _v$81) != null ? _el$125.style.setProperty("padding", _v$81) : _el$125.style.removeProperty("padding"));
+            _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"));
             return _p$;
           }, {
             e: void 0,
@@ -14794,7 +14806,7 @@ var init_Devtools = __esm({
             l: void 0,
             u: void 0
           });
-          return _el$108;
+          return _el$109;
         }
       });
     };
@@ -15558,6 +15570,17 @@ var init_Devtools = __esm({
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         font-size: ${font.size.xs};
       }
+
+      & .tsqd-query-static-indicator {
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        padding: 0 ${tokens.size[2]};
+        color: ${t2(colors.teal[800], colors.teal[300])};
+        background-color: ${t2(colors.teal[100], colors.teal[900])};
+        border-bottom: 1px solid ${t2(colors.teal[300], colors.teal[700])};
+        font-size: ${font.size.xs};
+      }
     `,
         selectedQueryRow: css`
       background-color: ${t2(colors.gray[200], colors.darkGray[500])};