@tanstack/query-devtools 5.23.0 → 5.27.0

package/build/Devtools/{NXICSXP3.js → DBFR2OSQ.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/BWUNFN7M.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.11.8/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -8836,7 +8836,8 @@ var QueryDevtoolsContext = createContext({
   client: void 0,
   onlineManager: void 0,
   queryFlavor: "",
-  version: ""
+  version: "",
+  shadowDOMTarget: void 0
 });
 function useQueryDevtoolsContext() {
   return useContext(QueryDevtoolsContext);
@@ -8903,7 +8904,6 @@ var CopyButton = (props) => {
           setCopyState("NoCopy");
         }, 1500);
       }, (err) => {
-        console.error("Failed to copy: ", err);
         setCopyState("ErrorCopy");
         setTimeout(() => {
           setCopyState("NoCopy");
@@ -9552,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) => {
@@ -9588,23 +9592,21 @@ 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");
+    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;
         }
@@ -9659,6 +9661,8 @@ var DevtoolsComponent = (props) => {
     value: props,
     get children() {
       return createComponent(PiPProvider, {
+        localStore,
+        setLocalStore,
         get children() {
           return createComponent(ThemeContext.Provider, {
             value: theme,
@@ -9677,8 +9681,11 @@ var DevtoolsComponent = (props) => {
 var Devtools_default = DevtoolsComponent;
 var 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(() => {
@@ -9711,9 +9718,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 +9753,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, {
@@ -9778,7 +9786,7 @@ var Devtools = (props) => {
         });
       }
     }), null);
-    createRenderEffect(() => className(_el$, clsx(u`
+    createRenderEffect(() => className(_el$, clsx(css`
             & .tsqd-panel-transition-exit-active,
             & .tsqd-panel-transition-enter-active {
               transition:
@@ -9811,8 +9819,11 @@ var Devtools = (props) => {
 var 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 {
@@ -9820,12 +9831,12 @@ var PiPPanel = (props) => {
     } = 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])};
     `;
@@ -9839,6 +9850,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {
@@ -9854,7 +9866,7 @@ var PiPPanel = (props) => {
     _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")));
@@ -9863,8 +9875,11 @@ var PiPPanel = (props) => {
 };
 var 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);
@@ -9958,12 +9973,12 @@ var DevtoolsPanel = (props) => {
     } = 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])};
     `;
@@ -9985,7 +10000,7 @@ var DevtoolsPanel = (props) => {
     }), 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");
@@ -10010,8 +10025,11 @@ var ContentView = (props) => {
   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");
@@ -10442,10 +10460,10 @@ var ContentView = (props) => {
       }
     }), 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"}`;
@@ -10512,8 +10530,11 @@ var ContentView = (props) => {
 };
 var 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,
@@ -10539,12 +10560,12 @@ var QueryRow = (props) => {
   }));
   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])};
     `;
@@ -10583,8 +10604,11 @@ var QueryRow = (props) => {
 };
 var 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,
@@ -10616,12 +10640,12 @@ var MutationRow = (props) => {
   }));
   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])};
     `;
@@ -10698,8 +10722,11 @@ var QueryStatusCount = () => {
   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();
@@ -10760,8 +10787,11 @@ var MutationStatusCount = () => {
     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();
@@ -10799,8 +10829,11 @@ var MutationStatusCount = () => {
 };
 var 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,
@@ -10837,7 +10870,7 @@ var QueryStatus = (props) => {
         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]};
@@ -10871,12 +10904,12 @@ var QueryStatus = (props) => {
     }), _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");
@@ -10892,8 +10925,11 @@ var QueryStatus = (props) => {
 };
 var 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
@@ -10956,13 +10992,13 @@ var QueryDetails = () => {
   });
   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])};
@@ -11028,9 +11064,9 @@ var QueryDetails = () => {
           };
           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);
@@ -11068,7 +11104,7 @@ var QueryDetails = () => {
           }), 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);
@@ -11102,25 +11138,25 @@ var QueryDetails = () => {
         }
       }));
       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);
@@ -11182,8 +11218,11 @@ var QueryDetails = () => {
 };
 var 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
@@ -11210,13 +11249,13 @@ var MutationDetails = () => {
   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])};
@@ -11390,7 +11429,7 @@ var createSubscribeToMutationCacheBatcher = (callback, equalityCheck = true) =>
   });
   return value;
 };
-var stylesFactory2 = (theme) => {
+var stylesFactory2 = (theme, css) => {
   const {
     colors,
     font,
@@ -11401,7 +11440,7 @@ var stylesFactory2 = (theme) => {
   } = tokens;
   const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
-    devtoolsBtn: u`
+    devtoolsBtn: css`
       z-index: 100000;
       position: fixed;
       padding: 4px;
@@ -11455,7 +11494,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    panel: u`
+    panel: css`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -11481,26 +11520,26 @@ var stylesFactory2 = (theme) => {
         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;
@@ -11508,7 +11547,7 @@ var stylesFactory2 = (theme) => {
       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;
@@ -11516,21 +11555,21 @@ var stylesFactory2 = (theme) => {
       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;
@@ -11551,7 +11590,7 @@ var stylesFactory2 = (theme) => {
         height: ${size2[2]};
       }
     `,
-    "closeBtn-position-top": u`
+    "closeBtn-position-top": css`
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
@@ -11575,7 +11614,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(180deg);
       }
     `,
-    "closeBtn-position-bottom": u`
+    "closeBtn-position-bottom": css`
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
@@ -11595,7 +11634,7 @@ var stylesFactory2 = (theme) => {
         width: calc(100% + ${size2[5]});
       }
     `,
-    "closeBtn-position-right": u`
+    "closeBtn-position-right": css`
       bottom: ${size2[2]};
       left: 0;
       transform: translate(-100%, 0);
@@ -11618,7 +11657,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(-90deg);
       }
     `,
-    "closeBtn-position-left": u`
+    "closeBtn-position-left": css`
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
@@ -11641,7 +11680,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(90deg);
       }
     `,
-    queriesContainer: u`
+    queriesContainer: css`
       flex: 1 1 700px;
       background-color: ${t2(colors.gray[50], colors.darkGray[700])};
       display: flex;
@@ -11650,7 +11689,7 @@ var stylesFactory2 = (theme) => {
         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 {
@@ -11658,31 +11697,31 @@ var stylesFactory2 = (theme) => {
       }
       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;
@@ -11699,12 +11738,12 @@ var stylesFactory2 = (theme) => {
         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;
@@ -11721,14 +11760,14 @@ var stylesFactory2 = (theme) => {
         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(
@@ -11741,12 +11780,12 @@ var stylesFactory2 = (theme) => {
       -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;
@@ -11767,10 +11806,10 @@ var stylesFactory2 = (theme) => {
         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;
@@ -11782,7 +11821,7 @@ var stylesFactory2 = (theme) => {
       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])};
@@ -11822,7 +11861,7 @@ var stylesFactory2 = (theme) => {
         border-width: 7px;
       }
     `,
-    filtersContainer: u`
+    filtersContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       & > button {
@@ -11851,7 +11890,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    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])};
@@ -11890,7 +11929,7 @@ var stylesFactory2 = (theme) => {
         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])};
@@ -11924,11 +11963,11 @@ var stylesFactory2 = (theme) => {
         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])};
@@ -11955,13 +11994,13 @@ var stylesFactory2 = (theme) => {
         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 {
@@ -11969,7 +12008,7 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
-    queryRow: u`
+    queryRow: css`
       display: flex;
       align-items: center;
       padding: 0;
@@ -12031,10 +12070,10 @@ var stylesFactory2 = (theme) => {
         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])};
@@ -12045,7 +12084,7 @@ var stylesFactory2 = (theme) => {
       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;
@@ -12057,7 +12096,7 @@ var stylesFactory2 = (theme) => {
       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;
@@ -12091,13 +12130,13 @@ var stylesFactory2 = (theme) => {
         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;
@@ -12137,7 +12176,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    actionsSelect: u`
+    actionsSelect: css`
       font-size: ${font.size.xs};
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       display: flex;
@@ -12186,7 +12225,7 @@ var stylesFactory2 = (theme) => {
         height: ${tokens.size[2]};
       }
     `,
-    settingsMenu: u`
+    settingsMenu: css`
       display: flex;
       & * {
         font-family: ui-sans-serif, Inter, system-ui, sans-serif, sans-serif;
@@ -12202,7 +12241,7 @@ var stylesFactory2 = (theme) => {
       min-width: 120px;
       padding: ${size2[0.5]};
     `,
-    settingsSubTrigger: u`
+    settingsSubTrigger: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12230,14 +12269,14 @@ var stylesFactory2 = (theme) => {
         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;
@@ -12259,7 +12298,7 @@ var stylesFactory2 = (theme) => {
         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 {
@@ -12269,7 +12308,7 @@ var stylesFactory2 = (theme) => {
         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])};
@@ -12321,8 +12360,8 @@ var stylesFactory2 = (theme) => {
     `
   };
 };
-var lightStyles2 = stylesFactory2("light");
-var darkStyles2 = stylesFactory2("dark");
+var lightStyles2 = (css) => stylesFactory2("light", css);
+var darkStyles2 = (css) => stylesFactory2("dark", css);
 delegateEvents(["click", "mousedown", "input"]);
 /*! Bundled license information: