@tanstack/query-devtools 5.21.3 → 5.23.0

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

@@ -9073,6 +9073,21 @@ function Settings() {
     />
   </svg>;
 }
+function PiPIcon() {
+  return <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M16 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V8M11.5 12.5L17 7M17 7H12M17 7V12M6.2 21H8.8C9.9201 21 10.4802 21 10.908 20.782C11.2843 20.5903 11.5903 20.2843 11.782 19.908C12 19.4802 12 18.9201 12 17.8V15.2C12 14.0799 12 13.5198 11.782 13.092C11.5903 12.7157 11.2843 12.4097 10.908 12.218C10.4802 12 9.92011 12 8.8 12H6.2C5.0799 12 4.51984 12 4.09202 12.218C3.71569 12.4097 3.40973 12.7157 3.21799 13.092C3 13.5198 3 14.0799 3 15.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
 function Copier() {
   return <svg
     width="24"
@@ -10291,7 +10306,8 @@ var stylesFactory = (theme) => {
     entry: u`
       & * {
         font-size: ${font.size.xs};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
       }
       position: relative;
       outline: none;
@@ -10435,6 +10451,124 @@ var [selectedMutationId, setSelectedMutationId] = createSignal(
   null
 );
 var [panelWidth, setPanelWidth] = createSignal(0);
+var PiPContext = createContext(
+  void 0
+);
+var PiPProvider = (props) => {
+  const [pipWindow, setPipWindow] = createSignal(null);
+  const closePipWindow = () => {
+    const w = pipWindow();
+    if (w != null) {
+      w.close();
+      setPipWindow(null);
+    }
+  };
+  const requestPipWindow = async (width, height) => {
+    if (pipWindow() != null) {
+      return;
+    }
+    const pip = window.open("", "", `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.title = "TanStack Query Devtools";
+    pip.document.body.style.margin = "0";
+    pip.addEventListener("pagehide", () => {
+      setPipWindow(null);
+    });
+    [...document.styleSheets].forEach((styleSheet) => {
+      try {
+        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
+        const style2 = document.createElement("style");
+        const style_node = styleSheet.ownerNode;
+        let style_id = "";
+        if (style_node && "id" in style_node) {
+          style_id = style_node.id;
+        }
+        if (style_id) {
+          style2.setAttribute("id", style_id);
+        }
+        style2.textContent = cssRules;
+        pip.document.head.appendChild(style2);
+      } catch (e2) {
+        const link = document.createElement("link");
+        if (styleSheet.href == null) {
+          return;
+        }
+        link.rel = "stylesheet";
+        link.type = styleSheet.type;
+        link.media = styleSheet.media.toString();
+        link.href = styleSheet.href;
+        pip.document.head.appendChild(link);
+      }
+    });
+    delegateEvents(
+      [
+        "focusin",
+        "focusout",
+        "pointermove",
+        "keydown",
+        "pointerdown",
+        "pointerup",
+        "click",
+        "mousedown",
+        "input"
+      ],
+      pip.document
+    );
+    setPipWindow(pip);
+  };
+  createEffect(() => {
+    const closePipWindowOnUnload = () => {
+      closePipWindow();
+    };
+    window.addEventListener("beforeunload", closePipWindowOnUnload);
+    onCleanup(() => {
+      window.removeEventListener("beforeunload", closePipWindowOnUnload);
+    });
+  });
+  createEffect(() => {
+    const gooberStyles = document.getElementById("_goober");
+    const w = pipWindow();
+    if (gooberStyles && w) {
+      const observer = new MutationObserver(() => {
+        const pip_style = w.document.getElementById("_goober");
+        if (pip_style) {
+          pip_style.textContent = gooberStyles.textContent;
+        }
+      });
+      observer.observe(gooberStyles, {
+        childList: true,
+        // observe direct children
+        subtree: true,
+        // and lower descendants too
+        characterDataOldValue: true
+        // pass old data to callback
+      });
+      onCleanup(() => {
+        observer.disconnect();
+      });
+    }
+  });
+  const value = createMemo(() => ({
+    pipWindow: pipWindow(),
+    requestPipWindow,
+    closePipWindow
+  }));
+  return <PiPContext.Provider value={value}>{props.children}</PiPContext.Provider>;
+};
+var usePiPWindow = () => {
+  const context = createMemo(() => {
+    const ctx = useContext(PiPContext);
+    if (!ctx) {
+      throw new Error("usePiPWindow must be used within a PiPProvider");
+    }
+    return ctx();
+  });
+  return context;
+};
 var DevtoolsComponent = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
     prefix: "TanstackQueryDevtools"
@@ -10446,7 +10580,7 @@ var DevtoolsComponent = (props) => {
       return preference;
     return colorScheme();
   });
-  return <QueryDevtoolsContext.Provider value={props}><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></QueryDevtoolsContext.Provider>;
+  return <QueryDevtoolsContext.Provider value={props}><PiPProvider><ThemeContext.Provider value={theme}><Devtools localStore={localStore} setLocalStore={setLocalStore} /></ThemeContext.Provider></PiPProvider></QueryDevtoolsContext.Provider>;
 };
 var Devtools_default = DevtoolsComponent;
 var Devtools = (props) => {
@@ -10454,6 +10588,7 @@ var Devtools = (props) => {
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
   });
+  const pip = usePiPWindow();
   const buttonPosition = createMemo(() => {
     return useQueryDevtoolsContext().buttonPosition || BUTTON_POSITION;
   });
@@ -10490,56 +10625,119 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
-  return <div
-    class={clsx(
-      u`
-          & .tsqd-panel-transition-exit-active,
-          & .tsqd-panel-transition-enter-active {
-            transition:
-              opacity 0.3s,
-              transform 0.3s;
-          }
-
-          & .tsqd-panel-transition-exit-to,
-          & .tsqd-panel-transition-enter {
-            ${position() === "top" || position() === "bottom" ? `transform: translateY(var(--tsqd-panel-height));` : `transform: translateX(var(--tsqd-panel-width));`}
-          }
-
-          & .tsqd-button-transition-exit-active,
-          & .tsqd-button-transition-enter-active {
-            transition:
-              opacity 0.3s,
-              transform 0.3s;
-            opacity: 1;
-          }
-
-          & .tsqd-button-transition-exit-to,
-          & .tsqd-button-transition-enter {
-            transform: ${buttonPosition() === "relative" ? `none;` : buttonPosition() === "top-left" ? `translateX(-72px);` : buttonPosition() === "top-right" ? `translateX(72px);` : `translateY(72px);`};
-            opacity: 0;
-          }
-        `,
-      "tsqd-transitions-container"
-    )}
-    ref={transitionsContainerRef}
-  >
-    <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
+  return <>
+    <Show when={pip().pipWindow}><Portal mount={pip().pipWindow?.document.body}><PiPPanel><ContentView
       localStore={props.localStore}
       setLocalStore={props.setLocalStore}
-    /></Show></TransitionGroup>
-    <TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
+    /></PiPPanel></Portal></Show>
+    <div
       class={clsx(
-        styles().devtoolsBtn,
-        styles()[`devtoolsBtn-position-${buttonPosition()}`]
+        u`
+            & .tsqd-panel-transition-exit-active,
+            & .tsqd-panel-transition-enter-active {
+              transition:
+                opacity 0.3s,
+                transform 0.3s;
+            }
+
+            & .tsqd-panel-transition-exit-to,
+            & .tsqd-panel-transition-enter {
+              ${position() === "top" || position() === "bottom" ? `transform: translateY(var(--tsqd-panel-height));` : `transform: translateX(var(--tsqd-panel-width));`}
+            }
+
+            & .tsqd-button-transition-exit-active,
+            & .tsqd-button-transition-enter-active {
+              transition:
+                opacity 0.3s,
+                transform 0.3s;
+              opacity: 1;
+            }
+
+            & .tsqd-button-transition-exit-to,
+            & .tsqd-button-transition-enter {
+              transform: ${buttonPosition() === "relative" ? `none;` : buttonPosition() === "top-left" ? `translateX(-72px);` : buttonPosition() === "top-right" ? `translateX(72px);` : `translateY(72px);`};
+              opacity: 0;
+            }
+          `,
+        "tsqd-transitions-container"
       )}
+      ref={transitionsContainerRef}
     >
-      <div aria-hidden="true"><TanstackLogo /></div>
-      <button
-        aria-label="Open Tanstack query devtools"
-        onClick={() => props.setLocalStore("open", "true")}
-      ><TanstackLogo /></button>
-    </div></Show></TransitionGroup>
-  </div>;
+      <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen() && !pip().pipWindow}><DevtoolsPanel
+        localStore={props.localStore}
+        setLocalStore={props.setLocalStore}
+      /></Show></TransitionGroup>
+      <TransitionGroup name="tsqd-button-transition"><Show when={!isOpen()}><div
+        class={clsx(
+          styles().devtoolsBtn,
+          styles()[`devtoolsBtn-position-${buttonPosition()}`],
+          "tsqd-open-btn-container"
+        )}
+      >
+        <div aria-hidden="true"><TanstackLogo /></div>
+        <button
+          aria-label="Open Tanstack query devtools"
+          onClick={() => props.setLocalStore("open", "true")}
+          class="tsqd-open-btn"
+        ><TanstackLogo /></button>
+      </div></Show></TransitionGroup>
+    </div>
+  </>;
+};
+var PiPPanel = (props) => {
+  const pip = usePiPWindow();
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const getPanelDynamicStyles = () => {
+    const { colors } = tokens;
+    const t2 = (light, dark) => theme() === "dark" ? dark : light;
+    if (panelWidth() < secondBreakpoint) {
+      return u`
+        flex-direction: column;
+        background-color: ${t2(colors.gray[300], colors.gray[600])};
+      `;
+    }
+    return u`
+      flex-direction: row;
+      background-color: ${t2(colors.gray[200], colors.darkGray[900])};
+    `;
+  };
+  createEffect(() => {
+    const win = pip().pipWindow;
+    const resizeCB = () => {
+      if (!win)
+        return;
+      setPanelWidth(win.innerWidth);
+    };
+    if (win) {
+      win.addEventListener("resize", resizeCB);
+    }
+    onCleanup(() => {
+      if (win) {
+        win.removeEventListener("resize", resizeCB);
+      }
+    });
+  });
+  return <div
+    style={{
+      "--tsqd-font-size": "16px",
+      "max-height": "100vh",
+      height: "100vh",
+      width: "100vw"
+    }}
+    class={clsx(
+      styles().panel,
+      getPanelDynamicStyles(),
+      {
+        [u`
+            min-width: min-content;
+          `]: panelWidth() < thirdBreakpoint
+      },
+      "tsqd-main-panel"
+    )}
+  >{props.children}</div>;
 };
 var DevtoolsPanel = (props) => {
   const theme = useTheme();
@@ -10693,6 +10891,7 @@ var ContentView = (props) => {
   const styles = createMemo(() => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
   });
+  const pip = usePiPWindow();
   const [selectedView, setSelectedView] = createSignal(
     "queries"
   );
@@ -10791,7 +10990,11 @@ var ContentView = (props) => {
         <div class={styles().logoAndToggleContainer}>
           <button
             class={clsx(styles().logo, "tsqd-text-logo-container")}
-            onClick={() => props.setLocalStore("open", "false")}
+            onClick={() => {
+              if (!pip().pipWindow) {
+                props.setLocalStore("open", "false");
+              }
+            }}
             aria-label="Close Tanstack query devtools"
           >
             <span
@@ -10852,7 +11055,7 @@ var ContentView = (props) => {
                   props.setLocalStore("mutationFilter", e2.currentTarget.value);
                 }
               }}
-              class="tsqd-query-filter-textfield"
+              class={clsx("tsqd-query-filter-textfield")}
               name="tsqd-query-filter-input"
               value={selectedView() === "queries" ? props.localStore.filter || "" : props.localStore.mutationFilter || ""}
             />
@@ -10951,6 +11154,21 @@ var ContentView = (props) => {
             aria-pressed={offline()}
             title={`${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`}
           >{offline() ? <Offline /> : <Wifi />}</button>
+          <Show when={!pip().pipWindow}><button
+            onClick={() => {
+              pip().requestPipWindow(
+                Number(window.innerWidth),
+                Number(props.localStore.height ?? 500)
+              );
+            }}
+            class={clsx(
+              styles().actionsBtn,
+              "tsqd-actions-btn",
+              "tsqd-action-open-pip"
+            )}
+            aria-label="Open in picture-in-picture mode"
+            title="Open in picture-in-picture mode"
+          ><PiPIcon /></button></Show>
           <index$f.Root gutter={4}>
             <index$f.Trigger
               class={clsx(
@@ -10961,6 +11179,7 @@ var ContentView = (props) => {
             ><Settings /></index$f.Trigger>
             <index$f.Portal
               ref={(el) => setComputedVariables(el)}
+              mount={pip().pipWindow ? pip().pipWindow.document.body : document.body}
             ><index$f.Content
               class={clsx(styles().settingsMenu, "tsqd-settings-menu")}
             >
@@ -10983,6 +11202,7 @@ var ContentView = (props) => {
                 </index$f.SubTrigger>
                 <index$f.Portal
                   ref={(el) => setComputedVariables(el)}
+                  mount={pip().pipWindow ? pip().pipWindow.document.body : document.body}
                 ><index$f.SubContent
                   class={clsx(
                     styles().settingsMenu,
@@ -11060,6 +11280,7 @@ var ContentView = (props) => {
                 </index$f.SubTrigger>
                 <index$f.Portal
                   ref={(el) => setComputedVariables(el)}
+                  mount={pip().pipWindow ? pip().pipWindow.document.body : document.body}
                 ><index$f.SubContent
                   class={clsx(
                     styles().settingsMenu,
@@ -12232,7 +12453,7 @@ var stylesFactory2 = (theme) => {
       display: flex;
       flex-direction: column;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
     dragHandle: u`
@@ -12412,8 +12633,8 @@ var stylesFactory2 = (theme) => {
       gap: ${tokens.size[2]};
       & > button {
         cursor: pointer;
-        padding: ${tokens.size[0.5]} ${tokens.size[2]};
-        padding-right: ${tokens.size[1.5]};
+        padding: ${tokens.size[0.5]} ${tokens.size[1.5]} ${tokens.size[0.5]}
+          ${tokens.size[2]};
         border-radius: ${tokens.border.radius.sm};
         background-color: ${t2(colors.gray[100], colors.darkGray[400])};
         border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
@@ -12597,7 +12818,8 @@ var stylesFactory2 = (theme) => {
         min-height: ${tokens.size[6]};
         flex: 1;
         padding: ${tokens.size[1]} ${tokens.size[2]};
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
         text-align: left;
         text-overflow: clip;
@@ -12622,7 +12844,7 @@ var stylesFactory2 = (theme) => {
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
@@ -12630,7 +12852,7 @@ var stylesFactory2 = (theme) => {
       text-align: left;
     `,
     detailsHeader: u`
-      font-family: 'Inter', sans-serif;
+      font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
       z-index: 2;
@@ -12662,7 +12884,8 @@ var stylesFactory2 = (theme) => {
       }
 
       & code {
-        font-family: 'Menlo', 'Fira Code', monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          'Liberation Mono', 'Courier New', monospace;
         margin: 0;
         font-size: ${font.size.xs};
         line-height: ${font.lineHeight.xs};
@@ -12687,7 +12910,7 @@ var stylesFactory2 = (theme) => {
       gap: ${tokens.size[2]};
       padding: 0px ${tokens.size[2]};
       & > button {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
         font-size: ${font.size.xs};
         padding: ${tokens.size[1]} ${tokens.size[2]};
         display: flex;
@@ -12772,7 +12995,7 @@ var stylesFactory2 = (theme) => {
     settingsMenu: u`
       display: flex;
       & * {
-        font-family: 'Inter', sans-serif;
+        font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
       flex-direction: column;
       gap: ${size2[0.5]};