@tanstack/query-devtools 5.23.0 → 5.27.0

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;
@@ -3216,10 +3223,10 @@ var init_utils = __esm({
       }
       return oldData;
     };
-    setupStyleSheet = (nonce) => {
+    setupStyleSheet = (nonce, target) => {
       if (!nonce)
         return;
-      const styleExists = document.querySelector("#_goober");
+      const styleExists = document.querySelector("#_goober") || target?.querySelector("#_goober");
       if (styleExists)
         return;
       const styleTag = document.createElement("style");
@@ -3227,7 +3234,11 @@ var init_utils = __esm({
       styleTag.appendChild(textNode);
       styleTag.id = "_goober";
       styleTag.setAttribute("nonce", nonce);
-      document.head.appendChild(styleTag);
+      if (target) {
+        target.appendChild(styleTag);
+      } else {
+        document.head.appendChild(styleTag);
+      }
     };
   }
 });
@@ -12202,7 +12213,8 @@ var init_Context = __esm({
       client: void 0,
       onlineManager: void 0,
       queryFlavor: "",
-      version: ""
+      version: "",
+      shadowDOMTarget: void 0
     });
     ThemeContext = createContext(
       () => "dark"
@@ -12970,13 +12982,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,23 +13022,21 @@ 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");
+        const gooberStyles = (useQueryDevtoolsContext().shadowDOMTarget || document).querySelector("#_goober");
         const w = pipWindow();
         if (gooberStyles && w) {
           const observer = new MutationObserver(() => {
-            const pip_style = w.document.getElementById("_goober");
+            const pip_style = (useQueryDevtoolsContext().shadowDOMTarget || w.document).querySelector("#_goober");
             if (pip_style) {
               pip_style.textContent = gooberStyles.textContent;
             }
@@ -13077,6 +13091,8 @@ var init_Devtools = __esm({
         value: props,
         get children() {
           return createComponent(PiPProvider, {
+            localStore,
+            setLocalStore,
             get children() {
               return createComponent(ThemeContext.Provider, {
                 value: theme,
@@ -13095,8 +13111,11 @@ var init_Devtools = __esm({
     Devtools_default = DevtoolsComponent;
     Devtools = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const pip = usePiPWindow();
       const buttonPosition = createMemo(() => {
@@ -13129,9 +13148,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 +13183,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, {
@@ -13196,7 +13216,7 @@ var init_Devtools = __esm({
             });
           }
         }), null);
-        createRenderEffect(() => className(_el$, clsx(u`
+        createRenderEffect(() => className(_el$, clsx(css`
             & .tsqd-panel-transition-exit-active,
             & .tsqd-panel-transition-enter-active {
               transition:
@@ -13229,8 +13249,11 @@ var init_Devtools = __esm({
     PiPPanel = (props) => {
       const pip = usePiPWindow();
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const getPanelDynamicStyles = () => {
         const {
@@ -13238,12 +13261,12 @@ var init_Devtools = __esm({
         } = tokens;
         const t2 = (light, dark) => theme() === "dark" ? dark : light;
         if (panelWidth() < secondBreakpoint) {
-          return u`
+          return css`
         flex-direction: column;
         background-color: ${t2(colors.gray[300], colors.gray[600])};
       `;
         }
-        return u`
+        return css`
       flex-direction: row;
       background-color: ${t2(colors.gray[200], colors.darkGray[900])};
     `;
@@ -13257,6 +13280,7 @@ var init_Devtools = __esm({
         };
         if (win) {
           win.addEventListener("resize", resizeCB);
+          resizeCB();
         }
         onCleanup(() => {
           if (win) {
@@ -13272,7 +13296,7 @@ var init_Devtools = __esm({
         _el$5.style.setProperty("width", "100vw");
         insert(_el$5, () => props.children);
         createRenderEffect(() => className(_el$5, clsx(styles().panel, getPanelDynamicStyles(), {
-          [u`
+          [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint
         }, "tsqd-main-panel")));
@@ -13281,8 +13305,11 @@ var init_Devtools = __esm({
     };
     DevtoolsPanel = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const [isResizing, setIsResizing] = createSignal(false);
       const position = createMemo(() => props.localStore.position || useQueryDevtoolsContext().position || POSITION);
@@ -13376,12 +13403,12 @@ var init_Devtools = __esm({
         } = tokens;
         const t2 = (light, dark) => theme() === "dark" ? dark : light;
         if (panelWidth() < secondBreakpoint) {
-          return u`
+          return css`
         flex-direction: column;
         background-color: ${t2(colors.gray[300], colors.gray[600])};
       `;
         }
-        return u`
+        return css`
       flex-direction: row;
       background-color: ${t2(colors.gray[200], colors.darkGray[900])};
     `;
@@ -13403,7 +13430,7 @@ var init_Devtools = __esm({
         }), null);
         createRenderEffect((_p$) => {
           const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
-            [u`
+            [css`
             min-width: min-content;
           `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
           }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
@@ -13428,8 +13455,11 @@ var init_Devtools = __esm({
       setupMutationCacheSubscription();
       let containerRef;
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const pip = usePiPWindow();
       const [selectedView, setSelectedView] = createSignal("queries");
@@ -13860,10 +13890,10 @@ var init_Devtools = __esm({
           }
         }), null);
         createRenderEffect((_p$) => {
-          const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
+          const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && css`
               height: 50%;
               max-height: 50%;
-            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && css`
               height: 100%;
               max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx("tsqd-query-filter-textfield"), _v$16 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$17 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$18 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$19 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$20 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$21 = `Clear ${selectedView()} cache`, _v$22 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$23 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$24 = offline(), _v$25 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
@@ -13930,8 +13960,11 @@ var init_Devtools = __esm({
     };
     QueryRow = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const {
         colors,
@@ -13957,12 +13990,12 @@ var init_Devtools = __esm({
       }));
       const getObserverCountColorStyles = () => {
         if (color() === "gray") {
-          return u`
+          return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
       `;
         }
-        return u`
+        return css`
       background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
       color: ${t2(colors[color()][800], colors[color()][300])};
     `;
@@ -14001,8 +14034,11 @@ var init_Devtools = __esm({
     };
     MutationRow = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const {
         colors,
@@ -14034,12 +14070,12 @@ var init_Devtools = __esm({
       }));
       const getObserverCountColorStyles = () => {
         if (color() === "gray") {
-          return u`
+          return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
       `;
         }
-        return u`
+        return css`
       background-color: ${t2(colors[color()][200] + alpha[80], colors[color()][900])};
       color: ${t2(colors[color()][800], colors[color()][300])};
     `;
@@ -14116,8 +14152,11 @@ var init_Devtools = __esm({
       const paused = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "paused").length);
       const inactive = createSubscribeToQueryCacheBatcher((queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "inactive").length);
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       return (() => {
         const _el$55 = _tmpl$26();
@@ -14178,8 +14217,11 @@ var init_Devtools = __esm({
         status: m.state.status
       }) === "red").length);
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       return (() => {
         const _el$56 = _tmpl$26();
@@ -14217,8 +14259,11 @@ var init_Devtools = __esm({
     };
     QueryStatus = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const {
         colors,
@@ -14255,7 +14300,7 @@ var init_Devtools = __esm({
             return showLabel();
           },
           get ["class"]() {
-            return clsx(styles().queryStatusTag, !showLabel() && u`
+            return clsx(styles().queryStatusTag, !showLabel() && css`
             cursor: pointer;
             &:hover {
               background: ${t2(colors.gray[200], colors.darkGray[400])}${alpha[80]};
@@ -14289,12 +14334,12 @@ var init_Devtools = __esm({
         }), _el$61);
         insert(_el$61, () => props.count);
         createRenderEffect((_p$) => {
-          const _v$32 = clsx(u`
+          const _v$32 = clsx(css`
             width: ${tokens.size[1.5]};
             height: ${tokens.size[1.5]};
             border-radius: ${tokens.border.radius.full};
             background-color: ${tokens.colors[props.color][500]};
-          `, "tsqd-query-status-tag-dot"), _v$33 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
+          `, "tsqd-query-status-tag-dot"), _v$33 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && css`
               background-color: ${t2(colors[props.color][100], colors[props.color][900])};
               color: ${t2(colors[props.color][700], colors[props.color][300])};
             `, "tsqd-query-status-tag-count");
@@ -14310,8 +14355,11 @@ var init_Devtools = __esm({
     };
     QueryDetails = () => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const {
         colors
@@ -14374,13 +14422,13 @@ var init_Devtools = __esm({
       });
       const getQueryStatusColors = () => {
         if (color() === "gray") {
-          return u`
+          return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
         border-color: ${t2(colors[color()][400], colors[color()][600])};
       `;
         }
-        return u`
+        return css`
       background-color: ${t2(colors[color()][100], colors[color()][900])};
       color: ${t2(colors[color()][700], colors[color()][300])};
       border-color: ${t2(colors[color()][400], colors[color()][600])};
@@ -14446,9 +14494,9 @@ var init_Devtools = __esm({
               };
               insert(_el$88, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$90);
               createRenderEffect((_p$) => {
-                const _v$34 = clsx(u`
+                const _v$34 = clsx(css`
                   color: ${t2(colors.red[500], colors.red[400])};
-                `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$35 = queryStatus() === "pending", _v$36 = u`
+                `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$35 = queryStatus() === "pending", _v$36 = css`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
                 _v$34 !== _p$._v$34 && className(_el$88, _p$._v$34 = _v$34);
@@ -14486,7 +14534,7 @@ var init_Devtools = __esm({
               }), null);
               insert(_el$91, createComponent(ChevronDown, {}), null);
               createRenderEffect((_p$) => {
-                const _v$37 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$38 = u`
+                const _v$37 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$38 = css`
                   background-color: ${tokens.colors.red[400]};
                 `, _v$39 = queryStatus() === "pending";
                 _v$37 !== _p$._v$37 && className(_el$91, _p$._v$37 = _v$37);
@@ -14520,25 +14568,25 @@ var init_Devtools = __esm({
             }
           }));
           createRenderEffect((_p$) => {
-            const _v$40 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$41 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$42 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$43 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$44 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$45 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$46 = clsx(u`
+            const _v$40 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$41 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$42 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$43 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$44 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$45 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$46 = clsx(css`
                 color: ${t2(colors.blue[600], colors.blue[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$47 = statusLabel() === "fetching", _v$48 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$47 = statusLabel() === "fetching", _v$48 = css`
                 background-color: ${t2(colors.blue[600], colors.blue[400])};
-              `, _v$49 = clsx(u`
+              `, _v$49 = clsx(css`
                 color: ${t2(colors.yellow[600], colors.yellow[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$50 = queryStatus() === "pending", _v$51 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$50 = queryStatus() === "pending", _v$51 = css`
                 background-color: ${t2(colors.yellow[600], colors.yellow[400])};
-              `, _v$52 = clsx(u`
+              `, _v$52 = clsx(css`
                 color: ${t2(colors.gray[600], colors.gray[300])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$53 = queryStatus() === "pending", _v$54 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$53 = queryStatus() === "pending", _v$54 = css`
                 background-color: ${t2(colors.gray[600], colors.gray[400])};
-              `, _v$55 = clsx(u`
+              `, _v$55 = clsx(css`
                 color: ${t2(colors.pink[500], colors.pink[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$56 = statusLabel() === "fetching", _v$57 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$56 = statusLabel() === "fetching", _v$57 = css`
                 background-color: ${t2(colors.pink[500], colors.pink[400])};
-              `, _v$58 = clsx(u`
+              `, _v$58 = clsx(css`
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$59 = restoringLoading(), _v$60 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$59 = restoringLoading(), _v$60 = css`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, _v$61 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$62 = tokens.size[2], _v$63 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$64 = tokens.size[2];
             _v$40 !== _p$._v$40 && className(_el$62, _p$._v$40 = _v$40);
@@ -14600,8 +14648,11 @@ var init_Devtools = __esm({
     };
     MutationDetails = () => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles2 : lightStyles2;
+        return theme() === "dark" ? darkStyles2(css) : lightStyles2(css);
       });
       const {
         colors
@@ -14628,13 +14679,13 @@ var init_Devtools = __esm({
       const activeMutation = createSubscribeToMutationCacheBatcher((mutationCache) => mutationCache().getAll().find((mutation) => mutation.mutationId === selectedMutationId()), false);
       const getQueryStatusColors = () => {
         if (color() === "gray") {
-          return u`
+          return css`
         background-color: ${t2(colors[color()][200], colors[color()][700])};
         color: ${t2(colors[color()][700], colors[color()][300])};
         border-color: ${t2(colors[color()][400], colors[color()][600])};
       `;
         }
-        return u`
+        return css`
       background-color: ${t2(colors[color()][100], colors[color()][900])};
       color: ${t2(colors[color()][700], colors[color()][300])};
       border-color: ${t2(colors[color()][400], colors[color()][600])};
@@ -14808,7 +14859,7 @@ var init_Devtools = __esm({
       });
       return value;
     };
-    stylesFactory2 = (theme) => {
+    stylesFactory2 = (theme, css) => {
       const {
         colors,
         font,
@@ -14819,7 +14870,7 @@ var init_Devtools = __esm({
       } = tokens;
       const t2 = (light, dark) => theme === "light" ? light : dark;
       return {
-        devtoolsBtn: u`
+        devtoolsBtn: css`
       z-index: 100000;
       position: fixed;
       padding: 4px;
@@ -14873,7 +14924,7 @@ var init_Devtools = __esm({
         }
       }
     `,
-        panel: u`
+        panel: css`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -14899,26 +14950,26 @@ var init_Devtools = __esm({
         background: ${t2(colors.gray[400], colors.darkGray[300])};
       }
     `,
-        "devtoolsBtn-position-bottom-right": u`
+        "devtoolsBtn-position-bottom-right": css`
       bottom: 12px;
       right: 12px;
     `,
-        "devtoolsBtn-position-bottom-left": u`
+        "devtoolsBtn-position-bottom-left": css`
       bottom: 12px;
       left: 12px;
     `,
-        "devtoolsBtn-position-top-left": u`
+        "devtoolsBtn-position-top-left": css`
       top: 12px;
       left: 12px;
     `,
-        "devtoolsBtn-position-top-right": u`
+        "devtoolsBtn-position-top-right": css`
       top: 12px;
       right: 12px;
     `,
-        "devtoolsBtn-position-relative": u`
+        "devtoolsBtn-position-relative": css`
       position: relative;
     `,
-        "panel-position-top": u`
+        "panel-position-top": css`
       top: 0;
       right: 0;
       left: 0;
@@ -14926,7 +14977,7 @@ var init_Devtools = __esm({
       min-height: ${size2[14]};
       border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
-        "panel-position-bottom": u`
+        "panel-position-bottom": css`
       bottom: 0;
       right: 0;
       left: 0;
@@ -14934,21 +14985,21 @@ var init_Devtools = __esm({
       min-height: ${size2[14]};
       border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
-        "panel-position-right": u`
+        "panel-position-right": css`
       bottom: 0;
       right: 0;
       top: 0;
       border-left: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
-        "panel-position-left": u`
+        "panel-position-left": css`
       bottom: 0;
       left: 0;
       top: 0;
       border-right: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
       max-width: 90%;
     `,
-        closeBtn: u`
+        closeBtn: css`
       position: absolute;
       cursor: pointer;
       z-index: 5;
@@ -14969,7 +15020,7 @@ var init_Devtools = __esm({
         height: ${size2[2]};
       }
     `,
-        "closeBtn-position-top": u`
+        "closeBtn-position-top": css`
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
@@ -14993,7 +15044,7 @@ var init_Devtools = __esm({
         transform: rotate(180deg);
       }
     `,
-        "closeBtn-position-bottom": u`
+        "closeBtn-position-bottom": css`
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
@@ -15013,7 +15064,7 @@ var init_Devtools = __esm({
         width: calc(100% + ${size2[5]});
       }
     `,
-        "closeBtn-position-right": u`
+        "closeBtn-position-right": css`
       bottom: ${size2[2]};
       left: 0;
       transform: translate(-100%, 0);
@@ -15036,7 +15087,7 @@ var init_Devtools = __esm({
         transform: rotate(-90deg);
       }
     `,
-        "closeBtn-position-left": u`
+        "closeBtn-position-left": css`
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
@@ -15059,7 +15110,7 @@ var init_Devtools = __esm({
         transform: rotate(90deg);
       }
     `,
-        queriesContainer: u`
+        queriesContainer: css`
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       display: flex;
@@ -15068,7 +15119,7 @@ var init_Devtools = __esm({
         font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       }
     `,
-        dragHandle: u`
+        dragHandle: css`
       position: absolute;
       transition: background-color 0.125s ease;
       &:hover {
@@ -15076,31 +15127,31 @@ var init_Devtools = __esm({
       }
       z-index: 4;
     `,
-        "dragHandle-position-top": u`
+        "dragHandle-position-top": css`
       bottom: 0;
       width: 100%;
       height: 3px;
       cursor: ns-resize;
     `,
-        "dragHandle-position-bottom": u`
+        "dragHandle-position-bottom": css`
       top: 0;
       width: 100%;
       height: 3px;
       cursor: ns-resize;
     `,
-        "dragHandle-position-right": u`
+        "dragHandle-position-right": css`
       left: 0;
       width: 3px;
       height: 100%;
       cursor: ew-resize;
     `,
-        "dragHandle-position-left": u`
+        "dragHandle-position-left": css`
       right: 0;
       width: 3px;
       height: 100%;
       cursor: ew-resize;
     `,
-        row: u`
+        row: css`
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -15117,12 +15168,12 @@ var init_Devtools = __esm({
         flex-direction: column;
       }
     `,
-        logoAndToggleContainer: u`
+        logoAndToggleContainer: css`
       display: flex;
       gap: ${tokens.size[3]};
       align-items: center;
     `,
-        logo: u`
+        logo: css`
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -15139,14 +15190,14 @@ var init_Devtools = __esm({
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-        tanstackLogo: u`
+        tanstackLogo: css`
       font-size: ${font.size.md};
       font-weight: ${font.weight.bold};
       line-height: ${font.lineHeight.xs};
       white-space: nowrap;
       color: ${t2(colors.gray[600], colors.gray[300])};
     `,
-        queryFlavorLogo: u`
+        queryFlavorLogo: css`
       font-weight: ${font.weight.semibold};
       font-size: ${font.size.xs};
       background: linear-gradient(
@@ -15159,12 +15210,12 @@ var init_Devtools = __esm({
       -webkit-text-fill-color: transparent;
       white-space: nowrap;
     `,
-        queryStatusContainer: u`
+        queryStatusContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       height: min-content;
     `,
-        queryStatusTag: u`
+        queryStatusTag: css`
       display: flex;
       gap: ${tokens.size[1.5]};
       box-sizing: border-box;
@@ -15185,10 +15236,10 @@ var init_Devtools = __esm({
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-        queryStatusTagLabel: u`
+        queryStatusTagLabel: css`
       font-size: ${font.size.xs};
     `,
-        queryStatusCount: u`
+        queryStatusCount: css`
       font-size: ${font.size.xs};
       padding: 0 5px;
       display: flex;
@@ -15200,7 +15251,7 @@ var init_Devtools = __esm({
       font-variant-numeric: tabular-nums;
       height: ${tokens.size[4.5]};
     `,
-        statusTooltip: u`
+        statusTooltip: css`
       position: absolute;
       z-index: 1;
       background-color: ${t2(colors.gray[50], colors.darkGray[500])};
@@ -15240,7 +15291,7 @@ var init_Devtools = __esm({
         border-width: 7px;
       }
     `,
-        filtersContainer: u`
+        filtersContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       & > button {
@@ -15269,7 +15320,7 @@ var init_Devtools = __esm({
         }
       }
     `,
-        filterInput: u`
+        filterInput: css`
       padding: ${size2[0.5]} ${size2[2]};
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
@@ -15308,7 +15359,7 @@ var init_Devtools = __esm({
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-        filterSelect: u`
+        filterSelect: css`
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
@@ -15342,11 +15393,11 @@ var init_Devtools = __esm({
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-        actionsContainer: u`
+        actionsContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
     `,
-        actionsBtn: u`
+        actionsBtn: css`
       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])};
@@ -15373,13 +15424,13 @@ var init_Devtools = __esm({
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-        actionsBtnOffline: u`
+        actionsBtnOffline: css`
       & svg {
         stroke: ${t2(colors.yellow[700], colors.yellow[500])};
         fill: ${t2(colors.yellow[700], colors.yellow[500])};
       }
     `,
-        overflowQueryContainer: u`
+        overflowQueryContainer: css`
       flex: 1;
       overflow-y: auto;
       & > div {
@@ -15387,7 +15438,7 @@ var init_Devtools = __esm({
         flex-direction: column;
       }
     `,
-        queryRow: u`
+        queryRow: css`
       display: flex;
       align-items: center;
       padding: 0;
@@ -15449,10 +15500,10 @@ var init_Devtools = __esm({
         font-size: ${font.size.xs};
       }
     `,
-        selectedQueryRow: u`
+        selectedQueryRow: css`
       background-color: ${t2(colors.gray[200], colors.darkGray[500])};
     `,
-        detailsContainer: u`
+        detailsContainer: css`
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       color: ${t2(colors.gray[700], colors.gray[300])};
@@ -15463,7 +15514,7 @@ var init_Devtools = __esm({
       display: flex;
       text-align: left;
     `,
-        detailsHeader: u`
+        detailsHeader: css`
       font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
       position: sticky;
       top: 0;
@@ -15475,7 +15526,7 @@ var init_Devtools = __esm({
       line-height: ${font.lineHeight.xs};
       text-align: left;
     `,
-        detailsBody: u`
+        detailsBody: css`
       margin: ${tokens.size[1.5]} 0px ${tokens.size[2]} 0px;
       & > div {
         display: flex;
@@ -15509,13 +15560,13 @@ var init_Devtools = __esm({
         align-items: center;
       }
     `,
-        queryDetailsStatus: u`
+        queryDetailsStatus: css`
       border: 1px solid ${colors.darkGray[200]};
       border-radius: ${tokens.border.radius.sm};
       font-weight: ${font.weight.medium};
       padding: ${tokens.size[1]} ${tokens.size[2.5]};
     `,
-        actionsBody: u`
+        actionsBody: css`
       flex-wrap: wrap;
       margin: ${tokens.size[2]} 0px ${tokens.size[2]} 0px;
       display: flex;
@@ -15555,7 +15606,7 @@ var init_Devtools = __esm({
         }
       }
     `,
-        actionsSelect: u`
+        actionsSelect: css`
       font-size: ${font.size.xs};
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       display: flex;
@@ -15604,7 +15655,7 @@ var init_Devtools = __esm({
         height: ${tokens.size[2]};
       }
     `,
-        settingsMenu: u`
+        settingsMenu: css`
       display: flex;
       & * {
         font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
@@ -15620,7 +15671,7 @@ var init_Devtools = __esm({
       min-width: 120px;
       padding: ${size2[0.5]};
     `,
-        settingsSubTrigger: u`
+        settingsSubTrigger: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -15648,14 +15699,14 @@ var init_Devtools = __esm({
         cursor: not-allowed;
       }
     `,
-        settingsMenuHeader: u`
+        settingsMenuHeader: css`
       padding: ${tokens.size[1]} ${tokens.size[1]};
       font-weight: ${font.weight.medium};
       border-bottom: 1px solid ${t2(colors.gray[300], colors.darkGray[400])};
       color: ${t2(colors.gray[500], colors.gray[400])};
       font-size: ${font.size["xs"]};
     `,
-        settingsSubButton: u`
+        settingsSubButton: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -15677,7 +15728,7 @@ var init_Devtools = __esm({
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-        themeSelectedButton: u`
+        themeSelectedButton: css`
       background-color: ${t2(colors.purple[100], colors.purple[900])};
       color: ${t2(colors.purple[700], colors.purple[300])};
       & svg {
@@ -15687,7 +15738,7 @@ var init_Devtools = __esm({
         background-color: ${t2(colors.purple[100], colors.purple[900])};
       }
     `,
-        viewToggle: u`
+        viewToggle: css`
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[200], colors.darkGray[600])};
       border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
@@ -15739,8 +15790,8 @@ var init_Devtools = __esm({
     `
       };
     };
-    lightStyles2 = stylesFactory2("light");
-    darkStyles2 = stylesFactory2("dark");
+    lightStyles2 = (css) => stylesFactory2("light", css);
+    darkStyles2 = (css) => stylesFactory2("dark", css);
     delegateEvents(["click", "mousedown", "input"]);
   }
 });
@@ -15758,6 +15809,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
   #version;
   #isMounted = false;
   #styleNonce;
+  #shadowDOMTarget;
   #buttonPosition;
   #position;
   #initialIsOpen;
@@ -15774,13 +15826,15 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
       position,
       initialIsOpen,
       errorTypes,
-      styleNonce
+      styleNonce,
+      shadowDOMTarget
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
     this.#version = version;
     this.#onlineManager = onlineManager;
     this.#styleNonce = styleNonce;
+    this.#shadowDOMTarget = shadowDOMTarget;
     this.#buttonPosition = createSignal(buttonPosition);
     this.#position = createSignal(position);
     this.#initialIsOpen = createSignal(initialIsOpen);
@@ -15819,7 +15873,7 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         Devtools2 = lazy(() => Promise.resolve().then(() => (init_Devtools(), Devtools_exports)));
         this.#Component = Devtools2;
       }
-      setupStyleSheet(this.#styleNonce);
+      setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
       return createComponent(Devtools2, mergeProps({
         get queryFlavor() {
           return _self$.#queryFlavor;
@@ -15829,6 +15883,9 @@ exports.TanstackQueryDevtools = class TanstackQueryDevtools {
         },
         get onlineManager() {
           return _self$.#onlineManager;
+        },
+        get shadowDOMTarget() {
+          return _self$.#shadowDOMTarget;
         }
       }, {
         get client() {