@tanstack/query-devtools 5.23.0 → 5.24.0

package/build/Devtools/{NXICSXP3.js → 335X72D7.js}

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, Show, Portal, use, insert, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/O2PITFF6.js';
+import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, Show, Portal, use, insert, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, clearDelegatedEvents, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/7LTSZCE6.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.11.8/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -8903,7 +8903,6 @@ var CopyButton = (props) => {
           setCopyState("NoCopy");
         }, 1500);
       }, (err) => {
-        console.error("Failed to copy: ", err);
         setCopyState("ErrorCopy");
         setTimeout(() => {
           setCopyState("NoCopy");
@@ -9552,13 +9551,17 @@ var PiPProvider = (props) => {
     if (pipWindow() != null) {
       return;
     }
-    const pip = window.open("", "", `width=${width},height=${height},popup`);
+    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.");
     }
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
     pip.document.title = "TanStack Query Devtools";
     pip.document.body.style.margin = "0";
     pip.addEventListener("pagehide", () => {
+      props.setLocalStore("pip_open", "false");
       setPipWindow(null);
     });
     [...document.styleSheets].forEach((styleSheet) => {
@@ -9588,16 +9591,14 @@ var PiPProvider = (props) => {
       }
     });
     delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+    props.setLocalStore("pip_open", "true");
     setPipWindow(pip);
   };
   createEffect(() => {
-    const closePipWindowOnUnload = () => {
-      closePipWindow();
-    };
-    window.addEventListener("beforeunload", closePipWindowOnUnload);
-    onCleanup(() => {
-      window.removeEventListener("beforeunload", closePipWindowOnUnload);
-    });
+    const pip_open = props.localStore.pip_open ?? "false";
+    if (pip_open === "true") {
+      requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || DEFAULT_HEIGHT));
+    }
   });
   createEffect(() => {
     const gooberStyles = document.getElementById("_goober");
@@ -9659,6 +9660,8 @@ var DevtoolsComponent = (props) => {
     value: props,
     get children() {
       return createComponent(PiPProvider, {
+        localStore,
+        setLocalStore,
         get children() {
           return createComponent(ThemeContext.Provider, {
             value: theme,
@@ -9711,9 +9714,10 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
+  const pip_open = createMemo(() => props.localStore.pip_open ?? "false");
   return [createComponent(Show, {
     get when() {
-      return pip().pipWindow;
+      return createMemo(() => !!pip().pipWindow)() && pip_open() == "true";
     },
     get children() {
       return createComponent(Portal, {
@@ -9745,7 +9749,7 @@ var Devtools = (props) => {
       get children() {
         return createComponent(Show, {
           get when() {
-            return createMemo(() => !!isOpen())() && !pip().pipWindow;
+            return createMemo(() => !!(isOpen() && !pip().pipWindow))() && pip_open() == "false";
           },
           get children() {
             return createComponent(DevtoolsPanel, {
@@ -9839,6 +9843,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {

package/build/Devtools/{6EDF3GZQ.jsx → 36BZFNWK.jsx}

@@ -11,6 +11,7 @@ import {
   Switch,
   batch,
   children,
+  clearDelegatedEvents,
   convertRemToPixels,
   createComponent,
   createComputed,
@@ -49,7 +50,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/AZNCIVVX.jsx";
+} from "../chunk/LJVATCV2.jsx";
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.11.8/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -10466,15 +10467,23 @@ var PiPProvider = (props) => {
     if (pipWindow() != null) {
       return;
     }
-    const pip = window.open("", "", `width=${width},height=${height},popup`);
+    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."
       );
     }
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
     pip.document.title = "TanStack Query Devtools";
     pip.document.body.style.margin = "0";
     pip.addEventListener("pagehide", () => {
+      props.setLocalStore("pip_open", "false");
       setPipWindow(null);
     });
     [...document.styleSheets].forEach((styleSheet) => {
@@ -10517,16 +10526,17 @@ var PiPProvider = (props) => {
       ],
       pip.document
     );
+    props.setLocalStore("pip_open", "true");
     setPipWindow(pip);
   };
   createEffect(() => {
-    const closePipWindowOnUnload = () => {
-      closePipWindow();
-    };
-    window.addEventListener("beforeunload", closePipWindowOnUnload);
-    onCleanup(() => {
-      window.removeEventListener("beforeunload", closePipWindowOnUnload);
-    });
+    const pip_open = props.localStore.pip_open ?? "false";
+    if (pip_open === "true") {
+      requestPipWindow(
+        Number(window.innerWidth),
+        Number(props.localStore.height || DEFAULT_HEIGHT)
+      );
+    }
   });
   createEffect(() => {
     const gooberStyles = document.getElementById("_goober");
@@ -10579,7 +10589,7 @@ var DevtoolsComponent = (props) => {
       return preference;
     return colorScheme();
   });
-  return <QueryDevtoolsContext.Provider value={props}><PiPProvider><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
+  return <QueryDevtoolsContext.Provider value={props}><PiPProvider localStore={localStore} setLocalStore={setLocalStore}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
@@ -10624,8 +10634,11 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
+  const pip_open = createMemo(
+    () => props.localStore.pip_open ?? "false"
+  );
   return <>
-    <Show when={pip().pipWindow}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
+    <Show when={pip().pipWindow && pip_open() == "true"}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
       localStore={props.localStore}
       setLocalStore={props.setLocalStore}
     /></PiPPanel></Portal></Show>
@@ -10662,7 +10675,7 @@ var Devtools = (props) => {
       )}
       ref={transitionsContainerRef}
     >
-      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow}><DevtoolsPanel
+      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow && pip_open() == "false"}><DevtoolsPanel
         localStore={props.localStore}
         setLocalStore={props.setLocalStore}
       /></Show></TransitionGroup>
@@ -10712,6 +10725,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {

package/build/Devtools/{T73WTYCS.jsx → VAXLBYTT.jsx}

@@ -11,6 +11,7 @@ import {
   Switch,
   batch,
   children,
+  clearDelegatedEvents,
   convertRemToPixels,
   createComponent,
   createComputed,
@@ -49,7 +50,7 @@ import {
   use,
   useContext,
   useTransition
-} from "../chunk/PQZZ5Z2E.jsx";
+} from "../chunk/IQDKCOXE.jsx";
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.11.8/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -10467,15 +10468,23 @@ var PiPProvider = (props) => {
     if (pipWindow() != null) {
       return;
     }
-    const pip = window.open("", "", `width=${width},height=${height},popup`);
+    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."
       );
     }
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
     pip.document.title = "TanStack Query Devtools";
     pip.document.body.style.margin = "0";
     pip.addEventListener("pagehide", () => {
+      props.setLocalStore("pip_open", "false");
       setPipWindow(null);
     });
     [...document.styleSheets].forEach((styleSheet) => {
@@ -10518,16 +10527,17 @@ var PiPProvider = (props) => {
       ],
       pip.document
     );
+    props.setLocalStore("pip_open", "true");
     setPipWindow(pip);
   };
   createEffect(() => {
-    const closePipWindowOnUnload = () => {
-      closePipWindow();
-    };
-    window.addEventListener("beforeunload", closePipWindowOnUnload);
-    onCleanup(() => {
-      window.removeEventListener("beforeunload", closePipWindowOnUnload);
-    });
+    const pip_open = props.localStore.pip_open ?? "false";
+    if (pip_open === "true") {
+      requestPipWindow(
+        Number(window.innerWidth),
+        Number(props.localStore.height || DEFAULT_HEIGHT)
+      );
+    }
   });
   createEffect(() => {
     const gooberStyles = document.getElementById("_goober");
@@ -10580,7 +10590,7 @@ var DevtoolsComponent = (props) => {
       return preference;
     return colorScheme();
   });
-  return <QueryDevtoolsContext.Provider value={props}><PiPProvider><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
+  return <QueryDevtoolsContext.Provider value={props}><PiPProvider localStore={localStore} setLocalStore={setLocalStore}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
@@ -10625,8 +10635,11 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
+  const pip_open = createMemo(
+    () => props.localStore.pip_open ?? "false"
+  );
   return <>
-    <Show when={pip().pipWindow}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
+    <Show when={pip().pipWindow && pip_open() == "true"}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
       localStore={props.localStore}
       setLocalStore={props.setLocalStore}
     /></PiPPanel></Portal></Show>
@@ -10663,7 +10676,7 @@ var Devtools = (props) => {
       )}
       ref={transitionsContainerRef}
     >
-      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow}><DevtoolsPanel
+      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow && pip_open() == "false"}><DevtoolsPanel
         localStore={props.localStore}
         setLocalStore={props.setLocalStore}
       /></Show></TransitionGroup>
@@ -10713,6 +10726,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {

package/build/Devtools/{QUGYIDRL.js → XYYT2JS6.js}

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, Show, Portal, use, insert, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/XKKA3NOX.js';
+import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, Show, Portal, use, insert, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, clearDelegatedEvents, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/KQZGNKMT.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.11.8/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -8903,6 +8903,7 @@ var CopyButton = (props) => {
           setCopyState("NoCopy");
         }, 1500);
       }, (err) => {
+        console.error("Failed to copy: ", err);
         setCopyState("ErrorCopy");
         setTimeout(() => {
           setCopyState("NoCopy");
@@ -9551,13 +9552,17 @@ var PiPProvider = (props) => {
     if (pipWindow() != null) {
       return;
     }
-    const pip = window.open("", "", `width=${width},height=${height},popup`);
+    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.");
     }
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
     pip.document.title = "TanStack Query Devtools";
     pip.document.body.style.margin = "0";
     pip.addEventListener("pagehide", () => {
+      props.setLocalStore("pip_open", "false");
       setPipWindow(null);
     });
     [...document.styleSheets].forEach((styleSheet) => {
@@ -9587,16 +9592,14 @@ var PiPProvider = (props) => {
       }
     });
     delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+    props.setLocalStore("pip_open", "true");
     setPipWindow(pip);
   };
   createEffect(() => {
-    const closePipWindowOnUnload = () => {
-      closePipWindow();
-    };
-    window.addEventListener("beforeunload", closePipWindowOnUnload);
-    onCleanup(() => {
-      window.removeEventListener("beforeunload", closePipWindowOnUnload);
-    });
+    const pip_open = props.localStore.pip_open ?? "false";
+    if (pip_open === "true") {
+      requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || DEFAULT_HEIGHT));
+    }
   });
   createEffect(() => {
     const gooberStyles = document.getElementById("_goober");
@@ -9658,6 +9661,8 @@ var DevtoolsComponent = (props) => {
     value: props,
     get children() {
       return createComponent(PiPProvider, {
+        localStore,
+        setLocalStore,
         get children() {
           return createComponent(ThemeContext.Provider, {
             value: theme,
@@ -9710,9 +9715,10 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
+  const pip_open = createMemo(() => props.localStore.pip_open ?? "false");
   return [createComponent(Show, {
     get when() {
-      return pip().pipWindow;
+      return createMemo(() => !!pip().pipWindow)() && pip_open() == "true";
     },
     get children() {
       return createComponent(Portal, {
@@ -9744,7 +9750,7 @@ var Devtools = (props) => {
       get children() {
         return createComponent(Show, {
           get when() {
-            return createMemo(() => !!isOpen())() && !pip().pipWindow;
+            return createMemo(() => !!(isOpen() && !pip().pipWindow))() && pip_open() == "false";
           },
           get children() {
             return createComponent(DevtoolsPanel, {
@@ -9838,6 +9844,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {

package/build/chunk/{O2PITFF6.js → 7LTSZCE6.js}

@@ -1491,6 +1491,13 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  if (document2[$$EVENTS]) {
+    for (let name of document2[$$EVENTS].keys())
+      document2.removeEventListener(name, eventHandler);
+    delete document2[$$EVENTS];
+  }
+}
 function setAttribute(node, name, value) {
   if (sharedConfig.context)
     return;
@@ -2276,7 +2283,6 @@ var simpleRules = [
     if (typeof BigInt !== "undefined") {
       return BigInt(v);
     }
-    console.error("Please add a BigInt polyfill.");
     return v;
   }),
   simpleTransformation(isDate, "Date", function(v) {
@@ -3130,4 +3136,4 @@ var setupStyleSheet = (nonce) => {
   document.head.appendChild(styleTag);
 };
 
-export { $PROXY, $TRACK, DEV, Dynamic, For, Index, Match, Portal, Show, Switch, addEventListener, batch, children, className, convertRemToPixels, createComponent, createComputed, createContext, createEffect, createMemo, createRenderEffect, createRoot, createSignal, createUniqueId, delegateEvents, deleteNestedDataByPath, displayValue, getListener, getMutationStatusColor, getOwner, getPreferredColorScheme, getQueryStatusColor, getQueryStatusColorByLabel, getQueryStatusLabel, getSidedProp, insert, isServer, lazy, mergeProps, mutationSortFns, on, onCleanup, onMount, render, setAttribute, setupStyleSheet, sortFns, splitProps, spread, stringify, template, untrack, updateNestedDataByPath, use, useContext, useTransition };
+export { $PROXY, $TRACK, DEV, Dynamic, For, Index, Match, Portal, Show, Switch, addEventListener, batch, children, className, clearDelegatedEvents, convertRemToPixels, createComponent, createComputed, createContext, createEffect, createMemo, createRenderEffect, createRoot, createSignal, createUniqueId, delegateEvents, deleteNestedDataByPath, displayValue, getListener, getMutationStatusColor, getOwner, getPreferredColorScheme, getQueryStatusColor, getQueryStatusColorByLabel, getQueryStatusLabel, getSidedProp, insert, isServer, lazy, mergeProps, mutationSortFns, on, onCleanup, onMount, render, setAttribute, setupStyleSheet, sortFns, splitProps, spread, stringify, template, untrack, updateNestedDataByPath, use, useContext, useTransition };

package/build/chunk/{PQZZ5Z2E.jsx → IQDKCOXE.jsx}

@@ -1493,6 +1493,13 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  if (document2[$$EVENTS]) {
+    for (let name of document2[$$EVENTS].keys())
+      document2.removeEventListener(name, eventHandler);
+    delete document2[$$EVENTS];
+  }
+}
 function setAttribute(node, name, value) {
   if (sharedConfig.context)
     return;
@@ -3175,6 +3182,7 @@ export {
   render,
   template,
   delegateEvents,
+  clearDelegatedEvents,
   setAttribute,
   spread,
   use,

package/build/chunk/{XKKA3NOX.js → KQZGNKMT.js}

@@ -1491,6 +1491,13 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  if (document2[$$EVENTS]) {
+    for (let name of document2[$$EVENTS].keys())
+      document2.removeEventListener(name, eventHandler);
+    delete document2[$$EVENTS];
+  }
+}
 function setAttribute(node, name, value) {
   if (sharedConfig.context)
     return;
@@ -2276,6 +2283,7 @@ var simpleRules = [
     if (typeof BigInt !== "undefined") {
       return BigInt(v);
     }
+    console.error("Please add a BigInt polyfill.");
     return v;
   }),
   simpleTransformation(isDate, "Date", function(v) {
@@ -3129,4 +3137,4 @@ var setupStyleSheet = (nonce) => {
   document.head.appendChild(styleTag);
 };
 
-export { $PROXY, $TRACK, DEV, Dynamic, For, Index, Match, Portal, Show, Switch, addEventListener, batch, children, className, convertRemToPixels, createComponent, createComputed, createContext, createEffect, createMemo, createRenderEffect, createRoot, createSignal, createUniqueId, delegateEvents, deleteNestedDataByPath, displayValue, getListener, getMutationStatusColor, getOwner, getPreferredColorScheme, getQueryStatusColor, getQueryStatusColorByLabel, getQueryStatusLabel, getSidedProp, insert, isServer, lazy, mergeProps, mutationSortFns, on, onCleanup, onMount, render, setAttribute, setupStyleSheet, sortFns, splitProps, spread, stringify, template, untrack, updateNestedDataByPath, use, useContext, useTransition };
+export { $PROXY, $TRACK, DEV, Dynamic, For, Index, Match, Portal, Show, Switch, addEventListener, batch, children, className, clearDelegatedEvents, convertRemToPixels, createComponent, createComputed, createContext, createEffect, createMemo, createRenderEffect, createRoot, createSignal, createUniqueId, delegateEvents, deleteNestedDataByPath, displayValue, getListener, getMutationStatusColor, getOwner, getPreferredColorScheme, getQueryStatusColor, getQueryStatusColorByLabel, getQueryStatusLabel, getSidedProp, insert, isServer, lazy, mergeProps, mutationSortFns, on, onCleanup, onMount, render, setAttribute, setupStyleSheet, sortFns, splitProps, spread, stringify, template, untrack, updateNestedDataByPath, use, useContext, useTransition };

package/build/chunk/{AZNCIVVX.jsx → LJVATCV2.jsx}

@@ -1493,6 +1493,13 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  if (document2[$$EVENTS]) {
+    for (let name of document2[$$EVENTS].keys())
+      document2.removeEventListener(name, eventHandler);
+    delete document2[$$EVENTS];
+  }
+}
 function setAttribute(node, name, value) {
   if (sharedConfig.context)
     return;
@@ -3174,6 +3181,7 @@ export {
   render,
   template,
   delegateEvents,
+  clearDelegatedEvents,
   setAttribute,
   spread,
   use,

package/build/dev.cjs

@@ -1391,6 +1391,13 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  if (document2[$$EVENTS]) {
+    for (let name of document2[$$EVENTS].keys())
+      document2.removeEventListener(name, eventHandler);
+    delete document2[$$EVENTS];
+  }
+}
 function setAttribute(node, name, value) {
   if (sharedConfig.context)
     return;
@@ -12970,13 +12977,17 @@ var init_Devtools = __esm({
         if (pipWindow() != null) {
           return;
         }
-        const pip = window.open("", "", `width=${width},height=${height},popup`);
+        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.");
         }
+        pip.document.head.innerHTML = "";
+        pip.document.body.innerHTML = "";
+        clearDelegatedEvents(pip.document);
         pip.document.title = "TanStack Query Devtools";
         pip.document.body.style.margin = "0";
         pip.addEventListener("pagehide", () => {
+          props.setLocalStore("pip_open", "false");
           setPipWindow(null);
         });
         [...document.styleSheets].forEach((styleSheet) => {
@@ -13006,16 +13017,14 @@ var init_Devtools = __esm({
           }
         });
         delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+        props.setLocalStore("pip_open", "true");
         setPipWindow(pip);
       };
       createEffect(() => {
-        const closePipWindowOnUnload = () => {
-          closePipWindow();
-        };
-        window.addEventListener("beforeunload", closePipWindowOnUnload);
-        onCleanup(() => {
-          window.removeEventListener("beforeunload", closePipWindowOnUnload);
-        });
+        const pip_open = props.localStore.pip_open ?? "false";
+        if (pip_open === "true") {
+          requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || DEFAULT_HEIGHT));
+        }
       });
       createEffect(() => {
         const gooberStyles = document.getElementById("_goober");
@@ -13077,6 +13086,8 @@ var init_Devtools = __esm({
         value: props,
         get children() {
           return createComponent(PiPProvider, {
+            localStore,
+            setLocalStore,
             get children() {
               return createComponent(ThemeContext.Provider, {
                 value: theme,
@@ -13129,9 +13140,10 @@ var init_Devtools = __esm({
           window.removeEventListener("focus", onFocus);
         });
       });
+      const pip_open = createMemo(() => props.localStore.pip_open ?? "false");
       return [createComponent(Show, {
         get when() {
-          return pip().pipWindow;
+          return createMemo(() => !!pip().pipWindow)() && pip_open() == "true";
         },
         get children() {
           return createComponent(Portal, {
@@ -13163,7 +13175,7 @@ var init_Devtools = __esm({
           get children() {
             return createComponent(Show, {
               get when() {
-                return createMemo(() => !!isOpen())() && !pip().pipWindow;
+                return createMemo(() => !!(isOpen() && !pip().pipWindow))() && pip_open() == "false";
               },
               get children() {
                 return createComponent(DevtoolsPanel, {
@@ -13257,6 +13269,7 @@ var init_Devtools = __esm({
         };
         if (win) {
           win.addEventListener("resize", resizeCB);
+          resizeCB();
         }
         onCleanup(() => {
           if (win) {

package/build/dev.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/O2PITFF6.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/KQZGNKMT.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/NXICSXP3.js'));
+        Devtools = lazy(() => import('./Devtools/XYYT2JS6.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/dev.jsx

@@ -3,7 +3,7 @@ import {
   lazy,
   render,
   setupStyleSheet
-} from "./chunk/PQZZ5Z2E.jsx";
+} from "./chunk/IQDKCOXE.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/T73WTYCS.jsx"));
+        Devtools = lazy(() => import("./Devtools/VAXLBYTT.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -1391,6 +1391,13 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+function clearDelegatedEvents(document2 = window.document) {
+  if (document2[$$EVENTS]) {
+    for (let name of document2[$$EVENTS].keys())
+      document2.removeEventListener(name, eventHandler);
+    delete document2[$$EVENTS];
+  }
+}
 function setAttribute(node, name, value) {
   if (sharedConfig.context)
     return;
@@ -12968,13 +12975,17 @@ var init_Devtools = __esm({
         if (pipWindow() != null) {
           return;
         }
-        const pip = window.open("", "", `width=${width},height=${height},popup`);
+        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.");
         }
+        pip.document.head.innerHTML = "";
+        pip.document.body.innerHTML = "";
+        clearDelegatedEvents(pip.document);
         pip.document.title = "TanStack Query Devtools";
         pip.document.body.style.margin = "0";
         pip.addEventListener("pagehide", () => {
+          props.setLocalStore("pip_open", "false");
           setPipWindow(null);
         });
         [...document.styleSheets].forEach((styleSheet) => {
@@ -13004,16 +13015,14 @@ var init_Devtools = __esm({
           }
         });
         delegateEvents(["focusin", "focusout", "pointermove", "keydown", "pointerdown", "pointerup", "click", "mousedown", "input"], pip.document);
+        props.setLocalStore("pip_open", "true");
         setPipWindow(pip);
       };
       createEffect(() => {
-        const closePipWindowOnUnload = () => {
-          closePipWindow();
-        };
-        window.addEventListener("beforeunload", closePipWindowOnUnload);
-        onCleanup(() => {
-          window.removeEventListener("beforeunload", closePipWindowOnUnload);
-        });
+        const pip_open = props.localStore.pip_open ?? "false";
+        if (pip_open === "true") {
+          requestPipWindow(Number(window.innerWidth), Number(props.localStore.height || DEFAULT_HEIGHT));
+        }
       });
       createEffect(() => {
         const gooberStyles = document.getElementById("_goober");
@@ -13075,6 +13084,8 @@ var init_Devtools = __esm({
         value: props,
         get children() {
           return createComponent(PiPProvider, {
+            localStore,
+            setLocalStore,
             get children() {
               return createComponent(ThemeContext.Provider, {
                 value: theme,
@@ -13127,9 +13138,10 @@ var init_Devtools = __esm({
           window.removeEventListener("focus", onFocus);
         });
       });
+      const pip_open = createMemo(() => props.localStore.pip_open ?? "false");
       return [createComponent(Show, {
         get when() {
-          return pip().pipWindow;
+          return createMemo(() => !!pip().pipWindow)() && pip_open() == "true";
         },
         get children() {
           return createComponent(Portal, {
@@ -13161,7 +13173,7 @@ var init_Devtools = __esm({
           get children() {
             return createComponent(Show, {
               get when() {
-                return createMemo(() => !!isOpen())() && !pip().pipWindow;
+                return createMemo(() => !!(isOpen() && !pip().pipWindow))() && pip_open() == "false";
               },
               get children() {
                 return createComponent(DevtoolsPanel, {
@@ -13255,6 +13267,7 @@ var init_Devtools = __esm({
         };
         if (win) {
           win.addEventListener("resize", resizeCB);
+          resizeCB();
         }
         onCleanup(() => {
           if (win) {

package/build/index.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/XKKA3NOX.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/7LTSZCE6.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/QUGYIDRL.js'));
+        Devtools = lazy(() => import('./Devtools/335X72D7.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -3,7 +3,7 @@ import {
   lazy,
   render,
   setupStyleSheet
-} from "./chunk/AZNCIVVX.jsx";
+} from "./chunk/LJVATCV2.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/6EDF3GZQ.jsx"));
+        Devtools = lazy(() => import("./Devtools/36BZFNWK.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.23.0",
+  "version": "5.24.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",

package/src/Devtools.tsx

@@ -19,7 +19,7 @@ import { Key } from '@solid-primitives/keyed'
 import { createLocalStorage } from '@solid-primitives/storage'
 import { createResizeObserver } from '@solid-primitives/resize-observer'
 import { DropdownMenu, RadioGroup } from '@kobalte/core'
-import { Portal, delegateEvents } from 'solid-js/web'
+import { Portal, clearDelegatedEvents, delegateEvents } from 'solid-js/web'
 import { tokens } from './theme'
 import {
   convertRemToPixels,
@@ -115,6 +115,8 @@ export type DevtoolsComponentType = Component<QueryDevtoolsProps>
 
 interface PiPProviderProps {
   children: JSX.Element
+  localStore: StorageObject<string>
+  setLocalStore: StorageSetter<string, unknown>
 }
 
 type PiPContextType = {
@@ -147,17 +149,31 @@ const PiPProvider = (props: PiPProviderProps) => {
       return
     }
 
-    const pip = window.open('', '', `width=${width},height=${height},popup`)
+    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.',
       )
     }
+
+    // Remove existing styles
+    pip.document.head.innerHTML = ''
+    // Remove existing body
+    pip.document.body.innerHTML = ''
+    // Clear Delegated Events
+    clearDelegatedEvents(pip.document)
+
     pip.document.title = 'TanStack Query Devtools'
     pip.document.body.style.margin = '0'
 
     // Detect when window is closed by user
     pip.addEventListener('pagehide', () => {
+      props.setLocalStore('pip_open', 'false')
       setPipWindow(null)
     })
 
@@ -208,20 +224,18 @@ const PiPProvider = (props: PiPProviderProps) => {
       ],
       pip.document,
     )
+    props.setLocalStore('pip_open', 'true')
     setPipWindow(pip)
   }
 
   createEffect(() => {
-    // Close pipWindow when the main window is closed
-    const closePipWindowOnUnload = () => {
-      closePipWindow()
+    const pip_open = (props.localStore.pip_open ?? 'false') as 'true' | 'false'
+    if (pip_open === 'true') {
+      requestPipWindow(
+        Number(window.innerWidth),
+        Number(props.localStore.height || DEFAULT_HEIGHT),
+      )
     }
-
-    window.addEventListener('beforeunload', closePipWindowOnUnload)
-
-    onCleanup(() => {
-      window.removeEventListener('beforeunload', closePipWindowOnUnload)
-    })
   })
 
   createEffect(() => {
@@ -286,7 +300,7 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
 
   return (
     <QueryDevtoolsContext.Provider value={props}>
-      <PiPProvider>
+      <PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
         <ThemeContext.Provider value={theme}>
           <Devtools localStore={localStore} setLocalStore={setLocalStore} />
         </ThemeContext.Provider>
@@ -358,9 +372,13 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
     })
   })
 
+  const pip_open = createMemo(
+    () => (props.localStore.pip_open ?? 'false') as 'true' | 'false',
+  )
+
   return (
     <>
-      <Show when={pip().pipWindow}>
+      <Show when={pip().pipWindow && pip_open() == 'true'}>
         <Portal mount={pip().pipWindow?.document.body}>
           <PiPPanel>
             <ContentView
@@ -413,7 +431,7 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
         ref={transitionsContainerRef}
       >
         <TransitionGroup name="tsqd-panel-transition">
-          <Show when={isOpen() && !pip().pipWindow}>
+          <Show when={isOpen() && !pip().pipWindow && pip_open() == 'false'}>
             <DevtoolsPanel
               localStore={props.localStore}
               setLocalStore={props.setLocalStore}
@@ -480,6 +498,7 @@ const PiPPanel: Component<{
     }
     if (win) {
       win.addEventListener('resize', resizeCB)
+      resizeCB()
     }
 
     onCleanup(() => {