@tanstack/query-devtools 5.27.3 → 5.27.8

package/build/Devtools/{DBFR2OSQ.js → NISTJ3CZ.js}

@@ -8874,14 +8874,17 @@ function chunkArray(array, size2) {
 }
 var Expander = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   return (() => {
     const _el$ = _tmpl$23();
-    createRenderEffect(() => className(_el$, clsx(styles().expander, u`
+    createRenderEffect(() => className(_el$, clsx(styles().expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
-        `, props.expanded && u`
+        `, props.expanded && css`
             & svg {
               top: -1px;
             }
@@ -8891,8 +8894,11 @@ var Expander = (props) => {
 };
 var CopyButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return (() => {
@@ -8954,8 +8960,11 @@ var CopyButton = (props) => {
 };
 var ClearArrayButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -8972,8 +8981,11 @@ var ClearArrayButton = (props) => {
 };
 var DeleteItemButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -8990,8 +9002,11 @@ var DeleteItemButton = (props) => {
 };
 var ToggleValueButton = (props) => {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   return (() => {
@@ -9009,7 +9024,7 @@ var ToggleValueButton = (props) => {
         return props.value;
       }
     }));
-    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
+    createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
           width: ${tokens.size[3.5]};
           height: ${tokens.size[3.5]};
         `)));
@@ -9021,8 +9036,11 @@ function isIterable(x) {
 }
 function Explorer(props) {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -9352,7 +9370,7 @@ function Explorer(props) {
     return _el$6;
   })();
 }
-var stylesFactory = (theme) => {
+var stylesFactory = (theme, css) => {
   const {
     colors,
     font,
@@ -9361,7 +9379,7 @@ var stylesFactory = (theme) => {
   } = tokens;
   const t2 = (light, dark) => theme === "light" ? light : dark;
   return {
-    entry: u`
+    entry: css`
       & * {
         font-size: ${font.size.xs};
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -9371,13 +9389,13 @@ var stylesFactory = (theme) => {
       outline: none;
       word-break: break-word;
     `,
-    subEntry: u`
+    subEntry: css`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
-    expander: u`
+    expander: css`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -9390,14 +9408,14 @@ var stylesFactory = (theme) => {
       transition: all 0.1s ease;
       /* outline: 1px solid ${colors.blue[400]}; */
     `,
-    expanderButtonContainer: u`
+    expanderButtonContainer: css`
       display: flex;
       align-items: center;
       line-height: ${size2[4]};
       min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
-    expanderButton: u`
+    expanderButton: css`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -9422,26 +9440,26 @@ var stylesFactory = (theme) => {
         left: 1px;
       }
     `,
-    info: u`
+    info: css`
       color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
-    label: u`
+    label: css`
       color: ${t2(colors.gray[700], colors.gray[300])};
       white-space: nowrap;
     `,
-    value: u`
+    value: css`
       color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
-    actions: u`
+    actions: css`
       display: inline-flex;
       gap: ${size2[2]};
       align-items: center;
     `,
-    row: u`
+    row: css`
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
@@ -9449,7 +9467,7 @@ var stylesFactory = (theme) => {
       line-height: ${size2[4.5]};
       align-items: center;
     `,
-    editableInput: u`
+    editableInput: css`
       border: none;
       padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
@@ -9460,7 +9478,7 @@ var stylesFactory = (theme) => {
         background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
-    actionButton: u`
+    actionButton: css`
       background-color: transparent;
       color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
@@ -9486,8 +9504,8 @@ var stylesFactory = (theme) => {
     `
   };
 };
-var lightStyles = stylesFactory("light");
-var darkStyles = stylesFactory("dark");
+var lightStyles = (css) => stylesFactory("light", css);
+var darkStyles = (css) => stylesFactory("dark", css);
 delegateEvents(["click"]);
 
 // src/Devtools.tsx
@@ -9538,6 +9556,7 @@ var DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
 var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
 var [selectedMutationId, setSelectedMutationId] = createSignal(null);
 var [panelWidth, setPanelWidth] = createSignal(0);
+var [offline, setOffline] = createSignal(false);
 var PiPContext = createContext(void 0);
 var PiPProvider = (props) => {
   const [pipWindow, setPipWindow] = createSignal(null);
@@ -10037,7 +10056,6 @@ var ContentView = (props) => {
   const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
   const mutationSort = createMemo(() => props.localStore.mutationSort || DEFAULT_MUTATION_SORT_FN_NAME);
   const mutationSortOrder = createMemo(() => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER);
-  const [offline, setOffline] = createSignal(false);
   const sortFn = createMemo(() => sortFns[sort()]);
   const mutationSortFn = createMemo(() => mutationSortFns[mutationSort()]);
   const onlineManager = createMemo(() => useQueryDevtoolsContext().onlineManager);

package/build/dev.cjs

@@ -12239,8 +12239,11 @@ function isIterable(x) {
 }
 function Explorer(props) {
   const theme = useTheme();
+  const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+    target: useQueryDevtoolsContext().shadowDOMTarget
+  }) : u;
   const styles = createMemo(() => {
-    return theme() === "dark" ? darkStyles : lightStyles;
+    return theme() === "dark" ? darkStyles(css) : lightStyles(css);
   });
   const queryClient = useQueryDevtoolsContext().client;
   const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -12583,10 +12586,10 @@ var init_Explorer = __esm({
     init_web();
     init_web();
     init_esm();
-    init_goober_modern();
     init_clsx();
     init_solid();
     init_dist6();
+    init_goober_modern();
     init_theme();
     init_utils();
     init_icons();
@@ -12604,14 +12607,17 @@ var init_Explorer = __esm({
     _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
     Expander = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       return (() => {
         const _el$ = _tmpl$23();
-        createRenderEffect(() => className(_el$, clsx(styles().expander, u`
+        createRenderEffect(() => className(_el$, clsx(styles().expander, css`
           transform: rotate(${props.expanded ? 90 : 0}deg);
-        `, props.expanded && u`
+        `, props.expanded && css`
             & svg {
               top: -1px;
             }
@@ -12621,8 +12627,11 @@ var init_Explorer = __esm({
     };
     CopyButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const [copyState, setCopyState] = createSignal("NoCopy");
       return (() => {
@@ -12685,8 +12694,11 @@ var init_Explorer = __esm({
     };
     ClearArrayButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const queryClient = useQueryDevtoolsContext().client;
       return (() => {
@@ -12703,8 +12715,11 @@ var init_Explorer = __esm({
     };
     DeleteItemButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const queryClient = useQueryDevtoolsContext().client;
       return (() => {
@@ -12721,8 +12736,11 @@ var init_Explorer = __esm({
     };
     ToggleValueButton = (props) => {
       const theme = useTheme();
+      const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
+        target: useQueryDevtoolsContext().shadowDOMTarget
+      }) : u;
       const styles = createMemo(() => {
-        return theme() === "dark" ? darkStyles : lightStyles;
+        return theme() === "dark" ? darkStyles(css) : lightStyles(css);
       });
       const queryClient = useQueryDevtoolsContext().client;
       return (() => {
@@ -12740,14 +12758,14 @@ var init_Explorer = __esm({
             return props.value;
           }
         }));
-        createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
+        createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
           width: ${tokens.size[3.5]};
           height: ${tokens.size[3.5]};
         `)));
         return _el$5;
       })();
     };
-    stylesFactory = (theme) => {
+    stylesFactory = (theme, css) => {
       const {
         colors,
         font,
@@ -12756,7 +12774,7 @@ var init_Explorer = __esm({
       } = tokens;
       const t2 = (light, dark) => theme === "light" ? light : dark;
       return {
-        entry: u`
+        entry: css`
       & * {
         font-size: ${font.size.xs};
         font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -12766,13 +12784,13 @@ var init_Explorer = __esm({
       outline: none;
       word-break: break-word;
     `,
-        subEntry: u`
+        subEntry: css`
       margin: 0 0 0 0.5em;
       padding-left: 0.75em;
       border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
       /* outline: 1px solid ${colors.teal[400]}; */
     `,
-        expander: u`
+        expander: css`
       & path {
         stroke: ${colors.gray[400]};
       }
@@ -12785,14 +12803,14 @@ var init_Explorer = __esm({
       transition: all 0.1s ease;
       /* outline: 1px solid ${colors.blue[400]}; */
     `,
-        expanderButtonContainer: u`
+        expanderButtonContainer: css`
       display: flex;
       align-items: center;
       line-height: ${size2[4]};
       min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
-        expanderButton: u`
+        expanderButton: css`
       cursor: pointer;
       color: inherit;
       font: inherit;
@@ -12817,26 +12835,26 @@ var init_Explorer = __esm({
         left: 1px;
       }
     `,
-        info: u`
+        info: css`
       color: ${t2(colors.gray[500], colors.gray[500])};
       font-size: ${font.size.xs};
       margin-left: ${size2[1]};
       /* outline: 1px solid ${colors.yellow[400]}; */
     `,
-        label: u`
+        label: css`
       color: ${t2(colors.gray[700], colors.gray[300])};
       white-space: nowrap;
     `,
-        value: u`
+        value: css`
       color: ${t2(colors.purple[600], colors.purple[400])};
       flex-grow: 1;
     `,
-        actions: u`
+        actions: css`
       display: inline-flex;
       gap: ${size2[2]};
       align-items: center;
     `,
-        row: u`
+        row: css`
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
@@ -12844,7 +12862,7 @@ var init_Explorer = __esm({
       line-height: ${size2[4.5]};
       align-items: center;
     `,
-        editableInput: u`
+        editableInput: css`
       border: none;
       padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
       flex-grow: 1;
@@ -12855,7 +12873,7 @@ var init_Explorer = __esm({
         background-color: ${t2(colors.gray[300], colors.darkGray[600])};
       }
     `,
-        actionButton: u`
+        actionButton: css`
       background-color: transparent;
       color: ${t2(colors.gray[500], colors.gray[500])};
       border: none;
@@ -12881,8 +12899,8 @@ var init_Explorer = __esm({
     `
       };
     };
-    lightStyles = stylesFactory("light");
-    darkStyles = stylesFactory("dark");
+    lightStyles = (css) => stylesFactory("light", css);
+    darkStyles = (css) => stylesFactory("dark", css);
     delegateEvents(["click"]);
   }
 });
@@ -12892,7 +12910,7 @@ var Devtools_exports = {};
 __export(Devtools_exports, {
   default: () => Devtools_default
 });
-var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, PiPContext, PiPProvider, usePiPWindow, DevtoolsComponent, Devtools_default, Devtools, PiPPanel, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
+var _tmpl$25, _tmpl$26, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$262, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, _tmpl$31, _tmpl$322, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, offline, setOffline, PiPContext, PiPProvider, usePiPWindow, DevtoolsComponent, Devtools_default, Devtools, PiPPanel, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12968,6 +12986,7 @@ var init_Devtools = __esm({
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
     [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
+    [offline, setOffline] = createSignal(false);
     PiPContext = createContext(void 0);
     PiPProvider = (props) => {
       const [pipWindow, setPipWindow] = createSignal(null);
@@ -13467,7 +13486,6 @@ var init_Devtools = __esm({
       const sortOrder = createMemo(() => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER);
       const mutationSort = createMemo(() => props.localStore.mutationSort || DEFAULT_MUTATION_SORT_FN_NAME);
       const mutationSortOrder = createMemo(() => Number(props.localStore.mutationSortOrder) || DEFAULT_SORT_ORDER);
-      const [offline, setOffline] = createSignal(false);
       const sortFn = createMemo(() => sortFns[sort()]);
       const mutationSortFn = createMemo(() => mutationSortFns[mutationSort()]);
       const onlineManager = createMemo(() => useQueryDevtoolsContext().onlineManager);

package/build/dev.js

@@ -69,7 +69,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/UXHVNKJK.js'));
+        Devtools = lazy(() => import('./Devtools/HSODRENB.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);

package/build/dev.jsx

@@ -73,7 +73,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/MZG6MFIN.jsx"));
+        Devtools = lazy(() => import("./Devtools/HPBPMTAC.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);