@tanstack/query-devtools 5.1.0 → 5.4.2

package/build/dev.cjs

@@ -10677,35 +10677,35 @@ var init_theme = __esm({
       },
       font: {
         size: {
-          "2xs": "0.625rem",
-          xs: "0.75rem",
-          sm: "0.875rem",
-          md: "1rem",
-          lg: "1.125rem",
-          xl: "1.25rem",
-          "2xl": "1.5rem",
-          "3xl": "1.875rem",
-          "4xl": "2.25rem",
-          "5xl": "3rem",
-          "6xl": "3.75rem",
-          "7xl": "4.5rem",
-          "8xl": "6rem",
-          "9xl": "8rem"
+          "2xs": "calc(var(--tsqd-font-size) * 0.625)",
+          xs: "calc(var(--tsqd-font-size) * 0.75)",
+          sm: "calc(var(--tsqd-font-size) * 0.875)",
+          md: "var(--tsqd-font-size)",
+          lg: "calc(var(--tsqd-font-size) * 1.125)",
+          xl: "calc(var(--tsqd-font-size) * 1.25)",
+          "2xl": "calc(var(--tsqd-font-size) * 1.5)",
+          "3xl": "calc(var(--tsqd-font-size) * 1.875)",
+          "4xl": "calc(var(--tsqd-font-size) * 2.25)",
+          "5xl": "calc(var(--tsqd-font-size) * 3)",
+          "6xl": "calc(var(--tsqd-font-size) * 3.75)",
+          "7xl": "calc(var(--tsqd-font-size) * 4.5)",
+          "8xl": "calc(var(--tsqd-font-size) * 6)",
+          "9xl": "calc(var(--tsqd-font-size) * 8)"
         },
         lineHeight: {
-          xs: "1rem",
-          sm: "1.25rem",
-          md: "1.5rem",
-          lg: "1.75rem",
-          xl: "1.75rem",
-          "2xl": "2rem",
-          "3xl": "2.25rem",
-          "4xl": "2.5rem",
-          "5xl": "1",
-          "6xl": "1",
-          "7xl": "1",
-          "8xl": "1",
-          "9xl": "1"
+          xs: "calc(var(--tsqd-font-size) * 1)",
+          sm: "calc(var(--tsqd-font-size) * 1.25)",
+          md: "calc(var(--tsqd-font-size) * 1.5)",
+          lg: "calc(var(--tsqd-font-size) * 1.75)",
+          xl: "calc(var(--tsqd-font-size) * 2)",
+          "2xl": "calc(var(--tsqd-font-size) * 2.25)",
+          "3xl": "calc(var(--tsqd-font-size) * 2.5)",
+          "4xl": "calc(var(--tsqd-font-size) * 2.75)",
+          "5xl": "calc(var(--tsqd-font-size) * 3)",
+          "6xl": "calc(var(--tsqd-font-size) * 3.25)",
+          "7xl": "calc(var(--tsqd-font-size) * 3.5)",
+          "8xl": "calc(var(--tsqd-font-size) * 3.75)",
+          "9xl": "calc(var(--tsqd-font-size) * 4)"
         },
         weight: {
           thin: "100",
@@ -10730,55 +10730,55 @@ var init_theme = __esm({
       border: {
         radius: {
           none: "0px",
-          xs: "0.125rem",
-          sm: "0.25rem",
-          md: "0.375rem",
-          lg: "0.5rem",
-          xl: "0.75rem",
-          "2xl": "1rem",
-          "3xl": "1.5rem",
+          xs: "calc(var(--tsqd-font-size) * 0.125)",
+          sm: "calc(var(--tsqd-font-size) * 0.25)",
+          md: "calc(var(--tsqd-font-size) * 0.375)",
+          lg: "calc(var(--tsqd-font-size) * 0.5)",
+          xl: "calc(var(--tsqd-font-size) * 0.75)",
+          "2xl": "calc(var(--tsqd-font-size) * 1)",
+          "3xl": "calc(var(--tsqd-font-size) * 1.5)",
           full: "9999px"
         }
       },
       size: {
         0: "0px",
-        0.25: "0.0625rem",
-        0.5: "0.125rem",
-        1: "0.25rem",
-        1.5: "0.375rem",
-        2: "0.5rem",
-        2.5: "0.625rem",
-        3: "0.75rem",
-        3.5: "0.875rem",
-        4: "1rem",
-        4.5: "1.125rem",
-        5: "1.25rem",
-        5.5: "1.375rem",
-        6: "1.5rem",
-        6.5: "1.625rem",
-        7: "1.75rem",
-        8: "2rem",
-        9: "2.25rem",
-        10: "2.5rem",
-        11: "2.75rem",
-        12: "3rem",
-        14: "3.5rem",
-        16: "4rem",
-        20: "5rem",
-        24: "6rem",
-        28: "7rem",
-        32: "8rem",
-        36: "9rem",
-        40: "10rem",
-        44: "11rem",
-        48: "12rem",
-        52: "13rem",
-        56: "14rem",
-        60: "15rem",
-        64: "16rem",
-        72: "18rem",
-        80: "20rem",
-        96: "24rem"
+        0.25: "calc(var(--tsqd-font-size) * 0.0625)",
+        0.5: "calc(var(--tsqd-font-size) * 0.125)",
+        1: "calc(var(--tsqd-font-size) * 0.25)",
+        1.5: "calc(var(--tsqd-font-size) * 0.375)",
+        2: "calc(var(--tsqd-font-size) * 0.5)",
+        2.5: "calc(var(--tsqd-font-size) * 0.625)",
+        3: "calc(var(--tsqd-font-size) * 0.75)",
+        3.5: "calc(var(--tsqd-font-size) * 0.875)",
+        4: "calc(var(--tsqd-font-size) * 1)",
+        4.5: "calc(var(--tsqd-font-size) * 1.125)",
+        5: "calc(var(--tsqd-font-size) * 1.25)",
+        5.5: "calc(var(--tsqd-font-size) * 1.375)",
+        6: "calc(var(--tsqd-font-size) * 1.5)",
+        6.5: "calc(var(--tsqd-font-size) * 1.625)",
+        7: "calc(var(--tsqd-font-size) * 1.75)",
+        8: "calc(var(--tsqd-font-size) * 2)",
+        9: "calc(var(--tsqd-font-size) * 2.25)",
+        10: "calc(var(--tsqd-font-size) * 2.5)",
+        11: "calc(var(--tsqd-font-size) * 2.75)",
+        12: "calc(var(--tsqd-font-size) * 3)",
+        14: "calc(var(--tsqd-font-size) * 3.5)",
+        16: "calc(var(--tsqd-font-size) * 4)",
+        20: "calc(var(--tsqd-font-size) * 5)",
+        24: "calc(var(--tsqd-font-size) * 6)",
+        28: "calc(var(--tsqd-font-size) * 7)",
+        32: "calc(var(--tsqd-font-size) * 8)",
+        36: "calc(var(--tsqd-font-size) * 9)",
+        40: "calc(var(--tsqd-font-size) * 10)",
+        44: "calc(var(--tsqd-font-size) * 11)",
+        48: "calc(var(--tsqd-font-size) * 12)",
+        52: "calc(var(--tsqd-font-size) * 13)",
+        56: "calc(var(--tsqd-font-size) * 14)",
+        60: "calc(var(--tsqd-font-size) * 15)",
+        64: "calc(var(--tsqd-font-size) * 16)",
+        72: "calc(var(--tsqd-font-size) * 18)",
+        80: "calc(var(--tsqd-font-size) * 20)",
+        96: "calc(var(--tsqd-font-size) * 24)"
       },
       shadow: Shadow,
       zIndices: {
@@ -12866,8 +12866,8 @@ var init_Explorer = __esm({
         expanderButtonContainer: u`
       display: flex;
       align-items: center;
-      line-height: 1.125rem;
-      min-height: 1.125rem;
+      line-height: ${size2[4]};
+      min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
         expanderButton: u`
@@ -12875,7 +12875,7 @@ var init_Explorer = __esm({
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size2[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -12917,8 +12917,8 @@ var init_Explorer = __esm({
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
-      margin-bottom: ${size2[0.5]};
-      line-height: 1.125rem;
+      margin: ${size2[0.25]} 0px;
+      line-height: ${size2[4.5]};
       align-items: center;
     `,
         editableInput: u`
@@ -13106,16 +13106,31 @@ var init_Devtools = __esm({
       const position = createMemo(() => {
         return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
       });
+      let transitionsContainerRef;
       createEffect(() => {
-        const root = document.querySelector(".tsqd-parent-container");
+        const root = transitionsContainerRef.parentElement;
         const height = props.localStore.height || DEFAULT_HEIGHT;
         const width = props.localStore.width || DEFAULT_WIDTH;
         const panelPosition = position();
         root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
         root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
       });
+      onMount(() => {
+        const onFocus = () => {
+          const root = transitionsContainerRef.parentElement;
+          const fontSize = getComputedStyle(root).fontSize;
+          root.style.setProperty("--tsqd-font-size", fontSize);
+        };
+        onFocus();
+        window.addEventListener("focus", onFocus);
+        onCleanup(() => {
+          window.removeEventListener("focus", onFocus);
+        });
+      });
       return (() => {
         const _el$ = _tmpl$25();
+        const _ref$ = transitionsContainerRef;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : transitionsContainerRef = _el$;
         insert(_el$, createComponent(TransitionGroup, {
           name: "tsqd-panel-transition",
           get children() {
@@ -13287,8 +13302,8 @@ var init_Devtools = __esm({
       };
       return (() => {
         const _el$5 = _tmpl$33(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-        const _ref$ = panelRef;
-        typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
+        const _ref$2 = panelRef;
+        typeof _ref$2 === "function" ? use(_ref$2, _el$5) : panelRef = _el$5;
         _el$6.$$mousedown = handleDragStart;
         _el$7.$$click = () => props.setLocalStore("open", "false");
         insert(_el$7, createComponent(ChevronDown, {}));
@@ -13325,6 +13340,7 @@ var init_Devtools = __esm({
     ContentView = (props) => {
       setupQueryCacheSubscription();
       setupMutationCacheSubscription();
+      let containerRef;
       const theme = useTheme();
       const styles = createMemo(() => {
         return theme() === "dark" ? darkStyles2 : lightStyles2;
@@ -13368,8 +13384,15 @@ var init_Devtools = __esm({
       const setDevtoolsPosition = (pos) => {
         props.setLocalStore("position", pos);
       };
+      const setComputedVariables = (el) => {
+        const computedStyle = getComputedStyle(containerRef);
+        const variable = computedStyle.getPropertyValue("--tsqd-font-size");
+        el.style.setProperty("--tsqd-font-size", variable);
+      };
       return [(() => {
         const _el$8 = _tmpl$192(), _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$9.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$17.nextSibling, _el$22 = _el$19.nextSibling, _el$25 = _el$16.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling;
+        const _ref$3 = containerRef;
+        typeof _ref$3 === "function" ? use(_ref$3, _el$8) : containerRef = _el$8;
         _el$11.$$click = () => props.setLocalStore("open", "false");
         insert(_el$13, () => useQueryDevtoolsContext().queryFlavor, _el$14);
         insert(_el$13, () => useQueryDevtoolsContext().version, null);
@@ -13533,6 +13556,7 @@ var init_Devtools = __esm({
                 return createComponent(Settings, {});
               }
             }), createComponent(index$d.Portal, {
+              ref: (el) => setComputedVariables(el),
               get children() {
                 return createComponent(index$d.Content, {
                   get ["class"]() {
@@ -13556,6 +13580,7 @@ var init_Devtools = __esm({
                             return [_tmpl$83(), createComponent(ChevronDown, {})];
                           }
                         }), createComponent(index$d.Portal, {
+                          ref: (el) => setComputedVariables(el),
                           get children() {
                             return createComponent(index$d.SubContent, {
                               get ["class"]() {
@@ -13625,6 +13650,7 @@ var init_Devtools = __esm({
                             return [_tmpl$132(), createComponent(ChevronDown, {})];
                           }
                         }), createComponent(index$d.Portal, {
+                          ref: (el) => setComputedVariables(el),
                           get children() {
                             return createComponent(index$d.SubContent, {
                               get ["class"]() {
@@ -14096,8 +14122,8 @@ var init_Devtools = __esm({
       });
       return (() => {
         const _el$55 = _tmpl$252(), _el$57 = _el$55.firstChild, _el$59 = _el$57.nextSibling;
-        const _ref$2 = tagRef;
-        typeof _ref$2 === "function" ? use(_ref$2, _el$55) : tagRef = _el$55;
+        const _ref$4 = tagRef;
+        typeof _ref$4 === "function" ? use(_ref$4, _el$55) : tagRef = _el$55;
         _el$55.addEventListener("mouseleave", () => {
           setMouseOver(false);
           setFocused(false);
@@ -14358,7 +14384,6 @@ var init_Devtools = __esm({
               return _el$89;
             }
           }), null);
-          _el$95.style.setProperty("padding", "0.5rem");
           insert(_el$95, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
@@ -14370,7 +14395,6 @@ var init_Devtools = __esm({
               return activeQuery();
             }
           }));
-          _el$97.style.setProperty("padding", "0.5rem");
           insert(_el$97, createComponent(Explorer, {
             label: "Query",
             defaultExpanded: ["Query", "queryKey"],
@@ -14399,7 +14423,7 @@ var init_Devtools = __esm({
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
               `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$58 = restoringLoading(), _v$59 = u`
                 background-color: ${t2(colors.cyan[500], colors.cyan[400])};
-              `, _v$60 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$61 = clsx(styles().detailsHeader, "tsqd-query-details-header");
+              `, _v$60 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$61 = tokens.size[2], _v$62 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$63 = tokens.size[2];
             _v$39 !== _p$._v$39 && className(_el$60, _p$._v$39 = _v$39);
             _v$40 !== _p$._v$40 && className(_el$61, _p$._v$40 = _v$40);
             _v$41 !== _p$._v$41 && className(_el$62, _p$._v$41 = _v$41);
@@ -14422,7 +14446,9 @@ var init_Devtools = __esm({
             _v$58 !== _p$._v$58 && (_el$83.disabled = _p$._v$58 = _v$58);
             _v$59 !== _p$._v$59 && className(_el$84, _p$._v$59 = _v$59);
             _v$60 !== _p$._v$60 && className(_el$94, _p$._v$60 = _v$60);
-            _v$61 !== _p$._v$61 && className(_el$96, _p$._v$61 = _v$61);
+            _v$61 !== _p$._v$61 && ((_p$._v$61 = _v$61) != null ? _el$95.style.setProperty("padding", _v$61) : _el$95.style.removeProperty("padding"));
+            _v$62 !== _p$._v$62 && className(_el$96, _p$._v$62 = _v$62);
+            _v$63 !== _p$._v$63 && ((_p$._v$63 = _v$63) != null ? _el$97.style.setProperty("padding", _v$63) : _el$97.style.removeProperty("padding"));
             return _p$;
           }, {
             _v$39: void 0,
@@ -14447,7 +14473,9 @@ var init_Devtools = __esm({
             _v$58: void 0,
             _v$59: void 0,
             _v$60: void 0,
-            _v$61: void 0
+            _v$61: void 0,
+            _v$62: void 0,
+            _v$63: void 0
           });
           return _el$60;
         }
@@ -14525,7 +14553,6 @@ var init_Devtools = __esm({
             }
           }), null);
           insert(_el$108, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
-          _el$110.style.setProperty("padding", "0.5rem");
           insert(_el$110, createComponent(Explorer, {
             label: "Variables",
             defaultExpanded: ["Variables"],
@@ -14533,7 +14560,6 @@ var init_Devtools = __esm({
               return activeMutation().state.variables;
             }
           }));
-          _el$112.style.setProperty("padding", "0.5rem");
           insert(_el$112, createComponent(Explorer, {
             label: "Context",
             defaultExpanded: ["Context"],
@@ -14541,7 +14567,6 @@ var init_Devtools = __esm({
               return activeMutation().state.context;
             }
           }));
-          _el$114.style.setProperty("padding", "0.5rem");
           insert(_el$114, createComponent(Explorer, {
             label: "Data",
             defaultExpanded: ["Data"],
@@ -14549,7 +14574,6 @@ var init_Devtools = __esm({
               return activeMutation().state.data;
             }
           }));
-          _el$116.style.setProperty("padding", "0.5rem");
           insert(_el$116, createComponent(Explorer, {
             label: "Mutation",
             defaultExpanded: ["Mutation"],
@@ -14558,25 +14582,33 @@ var init_Devtools = __esm({
             }
           }));
           createRenderEffect((_p$) => {
-            const _v$62 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$63 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$64 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$65 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$66 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$67 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = clsx(styles().detailsHeader, "tsqd-query-details-header");
-            _v$62 !== _p$._v$62 && className(_el$99, _p$._v$62 = _v$62);
-            _v$63 !== _p$._v$63 && className(_el$100, _p$._v$63 = _v$63);
-            _v$64 !== _p$._v$64 && className(_el$101, _p$._v$64 = _v$64);
-            _v$65 !== _p$._v$65 && className(_el$105, _p$._v$65 = _v$65);
-            _v$66 !== _p$._v$66 && className(_el$109, _p$._v$66 = _v$66);
-            _v$67 !== _p$._v$67 && className(_el$111, _p$._v$67 = _v$67);
-            _v$68 !== _p$._v$68 && className(_el$113, _p$._v$68 = _v$68);
-            _v$69 !== _p$._v$69 && className(_el$115, _p$._v$69 = _v$69);
+            const _v$64 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$65 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$66 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$67 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$68 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$69 = tokens.size[2], _v$70 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$71 = tokens.size[2], _v$72 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$73 = tokens.size[2], _v$74 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$75 = tokens.size[2];
+            _v$64 !== _p$._v$64 && className(_el$99, _p$._v$64 = _v$64);
+            _v$65 !== _p$._v$65 && className(_el$100, _p$._v$65 = _v$65);
+            _v$66 !== _p$._v$66 && className(_el$101, _p$._v$66 = _v$66);
+            _v$67 !== _p$._v$67 && className(_el$105, _p$._v$67 = _v$67);
+            _v$68 !== _p$._v$68 && className(_el$109, _p$._v$68 = _v$68);
+            _v$69 !== _p$._v$69 && ((_p$._v$69 = _v$69) != null ? _el$110.style.setProperty("padding", _v$69) : _el$110.style.removeProperty("padding"));
+            _v$70 !== _p$._v$70 && className(_el$111, _p$._v$70 = _v$70);
+            _v$71 !== _p$._v$71 && ((_p$._v$71 = _v$71) != null ? _el$112.style.setProperty("padding", _v$71) : _el$112.style.removeProperty("padding"));
+            _v$72 !== _p$._v$72 && className(_el$113, _p$._v$72 = _v$72);
+            _v$73 !== _p$._v$73 && ((_p$._v$73 = _v$73) != null ? _el$114.style.setProperty("padding", _v$73) : _el$114.style.removeProperty("padding"));
+            _v$74 !== _p$._v$74 && className(_el$115, _p$._v$74 = _v$74);
+            _v$75 !== _p$._v$75 && ((_p$._v$75 = _v$75) != null ? _el$116.style.setProperty("padding", _v$75) : _el$116.style.removeProperty("padding"));
             return _p$;
           }, {
-            _v$62: void 0,
-            _v$63: void 0,
             _v$64: void 0,
             _v$65: void 0,
             _v$66: void 0,
             _v$67: void 0,
             _v$68: void 0,
-            _v$69: void 0
+            _v$69: void 0,
+            _v$70: void 0,
+            _v$71: void 0,
+            _v$72: void 0,
+            _v$73: void 0,
+            _v$74: void 0,
+            _v$75: void 0
           });
           return _el$99;
         }
@@ -14750,7 +14782,7 @@ var init_Devtools = __esm({
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
         "panel-position-bottom": u`
@@ -14758,7 +14790,7 @@ var init_Devtools = __esm({
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
         "panel-position-right": u`
@@ -15090,6 +15122,8 @@ var init_Devtools = __esm({
           outline: 2px solid ${colors.blue[800]};
         }
         & svg {
+          width: ${tokens.size[3]};
+          height: ${tokens.size[3]};
           color: ${t2(colors.gray[500], colors.gray[400])};
         }
       }
@@ -15175,8 +15209,8 @@ var init_Devtools = __esm({
       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])};
-      width: 1.625rem;
-      height: 1.625rem;
+      width: ${tokens.size[6.5]};
+      height: ${tokens.size[6.5]};
       justify-content: center;
       display: flex;
       align-items: center;

package/build/dev.js

@@ -62,7 +62,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/CRASJTHY.js'));
+        Devtools = lazy(() => import('./Devtools/MVUALMJ4.js'));
         this.#Component = Devtools;
       }
       const _self$ = this;

package/build/dev.jsx

@@ -66,7 +66,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/QHGCTHEZ.jsx"));
+        Devtools = lazy(() => import("./Devtools/7FRXYIEA.jsx"));
         this.#Component = Devtools;
       }
       return <Devtools