@tanstack/query-devtools 5.23.0 → 5.27.0

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

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, Show, Portal, use, insert, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/XKKA3NOX.js';
+import { createContext, delegateEvents, sortFns, mutationSortFns, createSignal, $PROXY, $TRACK, getListener, batch, getPreferredColorScheme, createMemo, createComponent, createEffect, onMount, onCleanup, Show, Portal, use, insert, createRenderEffect, className, on, setAttribute, getQueryStatusColor, getMutationStatusColor, getQueryStatusLabel, spread, mergeProps, getQueryStatusColorByLabel, displayValue, For, isServer, createUniqueId, useContext, Index, updateNestedDataByPath, template, convertRemToPixels, getSidedProp, untrack, useTransition, createRoot, splitProps, addEventListener, stringify, Switch, Match, deleteNestedDataByPath, clearDelegatedEvents, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/EY5FZ5D2.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,6 +8904,7 @@ var CopyButton = (props) => {
           setCopyState("NoCopy");
         }, 1500);
       }, (err) => {
+        console.error("Failed to copy: ", err);
         setCopyState("ErrorCopy");
         setTimeout(() => {
           setCopyState("NoCopy");
@@ -9551,13 +9553,17 @@ var PiPProvider = (props) => {
     if (pipWindow() != null) {
       return;
     }
-    const pip = window.open("", "", `width=${width},height=${height},popup`);
+    const pip = window.open("", "TSQD-Devtools-Panel", `width=${width},height=${height},popup`);
     if (!pip) {
       throw new Error("Failed to open popup. Please allow popups for this site to view the devtools in picture-in-picture mode.");
     }
+    pip.document.head.innerHTML = "";
+    pip.document.body.innerHTML = "";
+    clearDelegatedEvents(pip.document);
     pip.document.title = "TanStack Query Devtools";
     pip.document.body.style.margin = "0";
     pip.addEventListener("pagehide", () => {
+      props.setLocalStore("pip_open", "false");
       setPipWindow(null);
     });
     [...document.styleSheets].forEach((styleSheet) => {
@@ -9587,23 +9593,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;
         }
@@ -9658,6 +9662,8 @@ var DevtoolsComponent = (props) => {
     value: props,
     get children() {
       return createComponent(PiPProvider, {
+        localStore,
+        setLocalStore,
         get children() {
           return createComponent(ThemeContext.Provider, {
             value: theme,
@@ -9676,8 +9682,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(() => {
@@ -9710,9 +9719,10 @@ var Devtools = (props) => {
       window.removeEventListener("focus", onFocus);
     });
   });
+  const pip_open = createMemo(() => props.localStore.pip_open ?? "false");
   return [createComponent(Show, {
     get when() {
-      return pip().pipWindow;
+      return createMemo(() => !!pip().pipWindow)() && pip_open() == "true";
     },
     get children() {
       return createComponent(Portal, {
@@ -9744,7 +9754,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, {
@@ -9777,7 +9787,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:
@@ -9810,8 +9820,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 {
@@ -9819,12 +9832,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])};
     `;
@@ -9838,6 +9851,7 @@ var PiPPanel = (props) => {
     };
     if (win) {
       win.addEventListener("resize", resizeCB);
+      resizeCB();
     }
     onCleanup(() => {
       if (win) {
@@ -9853,7 +9867,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")));
@@ -9862,8 +9876,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);
@@ -9957,12 +9974,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])};
     `;
@@ -9984,7 +10001,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");
@@ -10009,8 +10026,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");
@@ -10441,10 +10461,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"}`;
@@ -10511,8 +10531,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,
@@ -10538,12 +10561,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])};
     `;
@@ -10582,8 +10605,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,
@@ -10615,12 +10641,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])};
     `;
@@ -10697,8 +10723,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();
@@ -10759,8 +10788,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();
@@ -10798,8 +10830,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,
@@ -10836,7 +10871,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]};
@@ -10870,12 +10905,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");
@@ -10891,8 +10926,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
@@ -10955,13 +10993,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])};
@@ -11027,9 +11065,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);
@@ -11067,7 +11105,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);
@@ -11101,25 +11139,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);
@@ -11181,8 +11219,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
@@ -11209,13 +11250,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])};
@@ -11389,7 +11430,7 @@ var createSubscribeToMutationCacheBatcher = (callback, equalityCheck = true) =>
   });
   return value;
 };
-var stylesFactory2 = (theme) => {
+var stylesFactory2 = (theme, css) => {
   const {
     colors,
     font,
@@ -11400,7 +11441,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;
@@ -11454,7 +11495,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    panel: u`
+    panel: css`
       position: fixed;
       z-index: 9999;
       display: flex;
@@ -11480,26 +11521,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;
@@ -11507,7 +11548,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;
@@ -11515,21 +11556,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;
@@ -11550,7 +11591,7 @@ var stylesFactory2 = (theme) => {
         height: ${size2[2]};
       }
     `,
-    "closeBtn-position-top": u`
+    "closeBtn-position-top": css`
       bottom: 0;
       right: ${size2[2]};
       transform: translate(0, 100%);
@@ -11574,7 +11615,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(180deg);
       }
     `,
-    "closeBtn-position-bottom": u`
+    "closeBtn-position-bottom": css`
       top: 0;
       right: ${size2[2]};
       transform: translate(0, -100%);
@@ -11594,7 +11635,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);
@@ -11617,7 +11658,7 @@ var stylesFactory2 = (theme) => {
         transform: rotate(-90deg);
       }
     `,
-    "closeBtn-position-left": u`
+    "closeBtn-position-left": css`
       bottom: ${size2[2]};
       right: 0;
       transform: translate(100%, 0);
@@ -11640,7 +11681,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;
@@ -11649,7 +11690,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 {
@@ -11657,31 +11698,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;
@@ -11698,12 +11739,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;
@@ -11720,14 +11761,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(
@@ -11740,12 +11781,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;
@@ -11766,10 +11807,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;
@@ -11781,7 +11822,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])};
@@ -11821,7 +11862,7 @@ var stylesFactory2 = (theme) => {
         border-width: 7px;
       }
     `,
-    filtersContainer: u`
+    filtersContainer: css`
       display: flex;
       gap: ${tokens.size[2]};
       & > button {
@@ -11850,7 +11891,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])};
@@ -11889,7 +11930,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])};
@@ -11923,11 +11964,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])};
@@ -11954,13 +11995,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 {
@@ -11968,7 +12009,7 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
-    queryRow: u`
+    queryRow: css`
       display: flex;
       align-items: center;
       padding: 0;
@@ -12030,10 +12071,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])};
@@ -12044,7 +12085,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;
@@ -12056,7 +12097,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;
@@ -12090,13 +12131,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;
@@ -12136,7 +12177,7 @@ var stylesFactory2 = (theme) => {
         }
       }
     `,
-    actionsSelect: u`
+    actionsSelect: css`
       font-size: ${font.size.xs};
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       display: flex;
@@ -12185,7 +12226,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;
@@ -12201,7 +12242,7 @@ var stylesFactory2 = (theme) => {
       min-width: 120px;
       padding: ${size2[0.5]};
     `,
-    settingsSubTrigger: u`
+    settingsSubTrigger: css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -12229,14 +12270,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;
@@ -12258,7 +12299,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 {
@@ -12268,7 +12309,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])};
@@ -12320,8 +12361,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: