@tanstack/query-devtools 5.0.5 → 5.4.2

package/build/Devtools/{Y2E2LEWB.jsx → 7FRXYIEA.jsx}

@@ -30,11 +30,13 @@ import {
   onMount,
   setAttribute,
   splitProps,
+  spread,
   template,
   untrack,
+  use,
   useContext,
   useTransition
-} from "../chunk/AHAJNSNO.jsx";
+} from "../chunk/JRAMSUCV.jsx";
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -4073,6 +4075,29 @@ function createFocusScope(props, ref) {
     });
   });
 }
+function createFormResetListener(element, handler) {
+  createEffect(on(element, (element2) => {
+    if (element2 == null) {
+      return;
+    }
+    const form = getClosestForm(element2);
+    if (form == null) {
+      return;
+    }
+    form.addEventListener("reset", handler, {
+      passive: true
+    });
+    onCleanup(() => {
+      form.removeEventListener("reset", handler);
+    });
+  }));
+}
+function getClosestForm(element) {
+  return isFormElement(element) ? element.form : element.closest("form");
+}
+function isFormElement(element) {
+  return element.matches("textarea, input, select, button");
+}
 var DATA_LIVE_ANNOUNCER_ATTR = "data-live-announcer";
 function createHideOutside(props) {
   createEffect(() => {
@@ -4508,7 +4533,72 @@ function createToggleState(props = {}) {
     toggle
   };
 }
+var FORM_CONTROL_PROP_NAMES = ["id", "name", "validationState", "required", "disabled", "readOnly"];
+function createFormControl(props) {
+  const defaultId = `form-control-${createUniqueId()}`;
+  props = mergeDefaultProps({
+    id: defaultId
+  }, props);
+  const [labelId, setLabelId] = createSignal();
+  const [fieldId, setFieldId] = createSignal();
+  const [descriptionId, setDescriptionId] = createSignal();
+  const [errorMessageId, setErrorMessageId] = createSignal();
+  const getAriaLabelledBy = (fieldId2, fieldAriaLabel, fieldAriaLabelledBy) => {
+    const hasAriaLabelledBy = fieldAriaLabelledBy != null || labelId() != null;
+    return [
+      fieldAriaLabelledBy,
+      labelId(),
+      // If there is both an aria-label and aria-labelledby, add the field itself has an aria-labelledby
+      hasAriaLabelledBy && fieldAriaLabel != null ? fieldId2 : void 0
+    ].filter(Boolean).join(" ") || void 0;
+  };
+  const getAriaDescribedBy = (fieldAriaDescribedBy) => {
+    return [
+      descriptionId(),
+      // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA.
+      // See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+      errorMessageId(),
+      fieldAriaDescribedBy
+    ].filter(Boolean).join(" ") || void 0;
+  };
+  const dataset = createMemo(() => ({
+    "data-valid": access(props.validationState) === "valid" ? "" : void 0,
+    "data-invalid": access(props.validationState) === "invalid" ? "" : void 0,
+    "data-required": access(props.required) ? "" : void 0,
+    "data-disabled": access(props.disabled) ? "" : void 0,
+    "data-readonly": access(props.readOnly) ? "" : void 0
+  }));
+  const formControlContext = {
+    name: () => access(props.name) ?? access(props.id),
+    dataset,
+    validationState: () => access(props.validationState),
+    isRequired: () => access(props.required),
+    isDisabled: () => access(props.disabled),
+    isReadOnly: () => access(props.readOnly),
+    labelId,
+    fieldId,
+    descriptionId,
+    errorMessageId,
+    getAriaLabelledBy,
+    getAriaDescribedBy,
+    generateId: createGenerateId(() => access(props.id)),
+    registerLabel: createRegisterId(setLabelId),
+    registerField: createRegisterId(setFieldId),
+    registerDescription: createRegisterId(setDescriptionId),
+    registerErrorMessage: createRegisterId(setErrorMessageId)
+  };
+  return {
+    formControlContext
+  };
+}
 var FormControlContext = createContext();
+function useFormControlContext() {
+  const context = useContext(FormControlContext);
+  if (context === void 0) {
+    throw new Error("[kobalte]: `useFormControlContext` must be used within a `FormControlContext.Provider` component");
+  }
+  return context;
+}
 function Polymorphic(props) {
   const [local, others] = splitProps(props, ["asChild", "as", "children"]);
   if (!local.asChild) {
@@ -4559,6 +4649,60 @@ function combineProps2(baseProps, overrideProps) {
     reverseEventHandlers: true
   });
 }
+function FormControlDescription(props) {
+  const context = useFormControlContext();
+  props = mergeDefaultProps({
+    id: context.generateId("description")
+  }, props);
+  createEffect(() => onCleanup(context.registerDescription(props.id)));
+  return createComponent(Polymorphic, mergeProps({
+    as: "div"
+  }, () => context.dataset(), props));
+}
+function FormControlErrorMessage(props) {
+  const context = useFormControlContext();
+  props = mergeDefaultProps({
+    id: context.generateId("error-message")
+  }, props);
+  const [local, others] = splitProps(props, ["forceMount"]);
+  const isInvalid = () => context.validationState() === "invalid";
+  createEffect(() => {
+    if (!isInvalid()) {
+      return;
+    }
+    onCleanup(context.registerErrorMessage(others.id));
+  });
+  return createComponent(Show, {
+    get when() {
+      return local.forceMount || isInvalid();
+    },
+    get children() {
+      return createComponent(Polymorphic, mergeProps({
+        as: "div"
+      }, () => context.dataset(), others));
+    }
+  });
+}
+function FormControlLabel(props) {
+  let ref;
+  const context = useFormControlContext();
+  props = mergeDefaultProps({
+    id: context.generateId("label")
+  }, props);
+  const [local, others] = splitProps(props, ["ref"]);
+  const tagName = createTagName(() => ref, () => "label");
+  createEffect(() => onCleanup(context.registerLabel(others.id)));
+  return createComponent(Polymorphic, mergeProps({
+    as: "label",
+    ref(r$) {
+      const _ref$ = mergeRefs((el) => ref = el, local.ref);
+      typeof _ref$ === "function" && _ref$(r$);
+    },
+    get ["for"]() {
+      return createMemo(() => tagName() === "label")() ? context.fieldId() : void 0;
+    }
+  }, () => context.dataset(), others));
+}
 var RTL_SCRIPTS = /* @__PURE__ */ new Set(["Avst", "Arab", "Armi", "Syrc", "Samr", "Mand", "Thaa", "Mend", "Nkoo", "Adlm", "Rohg", "Hebr"]);
 var RTL_LANGS = /* @__PURE__ */ new Set(["ae", "ar", "arc", "bcc", "bqi", "ckb", "dv", "fa", "glk", "he", "ku", "mzn", "nqo", "pnb", "ps", "sd", "ug", "ur", "yi"]);
 function isRTL2(locale) {
@@ -7932,7 +8076,331 @@ var PaginationContext = createContext();
 var PopoverContext = createContext();
 var ProgressContext = createContext();
 var RadioGroupContext = createContext();
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (context === void 0) {
+    throw new Error("[kobalte]: `useRadioGroupContext` must be used within a `RadioGroup` component");
+  }
+  return context;
+}
 var RadioGroupItemContext = createContext();
+function useRadioGroupItemContext() {
+  const context = useContext(RadioGroupItemContext);
+  if (context === void 0) {
+    throw new Error("[kobalte]: `useRadioGroupItemContext` must be used within a `RadioGroup.Item` component");
+  }
+  return context;
+}
+function RadioGroupItem(props) {
+  const formControlContext = useFormControlContext();
+  const radioGroupContext = useRadioGroupContext();
+  const defaultId = `${formControlContext.generateId("item")}-${createUniqueId()}`;
+  props = mergeDefaultProps({
+    id: defaultId
+  }, props);
+  const [local, others] = splitProps(props, ["value", "disabled", "onPointerDown"]);
+  const [inputId, setInputId] = createSignal();
+  const [labelId, setLabelId] = createSignal();
+  const [descriptionId, setDescriptionId] = createSignal();
+  const [inputRef, setInputRef] = createSignal();
+  const [isFocused, setIsFocused] = createSignal(false);
+  const isSelected = createMemo(() => {
+    return radioGroupContext.isSelectedValue(local.value);
+  });
+  const isDisabled = createMemo(() => {
+    return local.disabled || formControlContext.isDisabled() || false;
+  });
+  const onPointerDown = (e2) => {
+    callHandler(e2, local.onPointerDown);
+    if (isFocused()) {
+      e2.preventDefault();
+    }
+  };
+  const dataset = createMemo(() => ({
+    ...formControlContext.dataset(),
+    "data-disabled": isDisabled() ? "" : void 0,
+    "data-checked": isSelected() ? "" : void 0
+  }));
+  const context = {
+    value: () => local.value,
+    dataset,
+    isSelected,
+    isDisabled,
+    inputId,
+    labelId,
+    descriptionId,
+    inputRef,
+    select: () => radioGroupContext.setSelectedValue(local.value),
+    generateId: createGenerateId(() => others.id),
+    registerInput: createRegisterId(setInputId),
+    registerLabel: createRegisterId(setLabelId),
+    registerDescription: createRegisterId(setDescriptionId),
+    setIsFocused,
+    setInputRef
+  };
+  return createComponent(RadioGroupItemContext.Provider, {
+    value: context,
+    get children() {
+      return createComponent(Polymorphic, mergeProps({
+        as: "div",
+        role: "group",
+        onPointerDown
+      }, dataset, others));
+    }
+  });
+}
+function RadioGroupItemControl(props) {
+  const context = useRadioGroupItemContext();
+  props = mergeDefaultProps({
+    id: context.generateId("control")
+  }, props);
+  const [local, others] = splitProps(props, ["onClick", "onKeyDown"]);
+  const onClick = (e2) => {
+    callHandler(e2, local.onClick);
+    context.select();
+    context.inputRef()?.focus();
+  };
+  const onKeyDown = (e2) => {
+    callHandler(e2, local.onKeyDown);
+    if (e2.key === EventKey.Space) {
+      context.select();
+      context.inputRef()?.focus();
+    }
+  };
+  return createComponent(Polymorphic, mergeProps({
+    as: "div",
+    onClick,
+    onKeyDown
+  }, () => context.dataset(), others));
+}
+function RadioGroupItemDescription(props) {
+  const context = useRadioGroupItemContext();
+  props = mergeDefaultProps({
+    id: context.generateId("description")
+  }, props);
+  createEffect(() => onCleanup(context.registerDescription(props.id)));
+  return createComponent(Polymorphic, mergeProps({
+    as: "div"
+  }, () => context.dataset(), props));
+}
+function RadioGroupItemIndicator(props) {
+  const context = useRadioGroupItemContext();
+  props = mergeDefaultProps({
+    id: context.generateId("indicator")
+  }, props);
+  const [local, others] = splitProps(props, ["ref", "forceMount"]);
+  const presence = createPresence(() => local.forceMount || context.isSelected());
+  return createComponent(Show, {
+    get when() {
+      return presence.isPresent();
+    },
+    get children() {
+      return createComponent(Polymorphic, mergeProps({
+        as: "div",
+        ref(r$) {
+          const _ref$ = mergeRefs(presence.setRef, local.ref);
+          typeof _ref$ === "function" && _ref$(r$);
+        }
+      }, () => context.dataset(), others));
+    }
+  });
+}
+var _tmpl$$6 = /* @__PURE__ */ template(`<input type="radio">`);
+function RadioGroupItemInput(props) {
+  const formControlContext = useFormControlContext();
+  const radioGroupContext = useRadioGroupContext();
+  const radioContext = useRadioGroupItemContext();
+  props = mergeDefaultProps({
+    id: radioContext.generateId("input")
+  }, props);
+  const [local, others] = splitProps(props, ["ref", "style", "aria-labelledby", "aria-describedby", "onChange", "onFocus", "onBlur"]);
+  const ariaLabelledBy = () => {
+    return [
+      local["aria-labelledby"],
+      radioContext.labelId(),
+      // If there is both an aria-label and aria-labelledby, add the input itself has an aria-labelledby
+      local["aria-labelledby"] != null && others["aria-label"] != null ? others.id : void 0
+    ].filter(Boolean).join(" ") || void 0;
+  };
+  const ariaDescribedBy = () => {
+    return [local["aria-describedby"], radioContext.descriptionId(), radioGroupContext.ariaDescribedBy()].filter(Boolean).join(" ") || void 0;
+  };
+  const onChange = (e2) => {
+    callHandler(e2, local.onChange);
+    e2.stopPropagation();
+    radioGroupContext.setSelectedValue(radioContext.value());
+    const target = e2.target;
+    target.checked = radioContext.isSelected();
+  };
+  const onFocus = (e2) => {
+    callHandler(e2, local.onFocus);
+    radioContext.setIsFocused(true);
+  };
+  const onBlur = (e2) => {
+    callHandler(e2, local.onBlur);
+    radioContext.setIsFocused(false);
+  };
+  createEffect(() => onCleanup(radioContext.registerInput(others.id)));
+  return (() => {
+    const _el$ = _tmpl$$6();
+    _el$.addEventListener("blur", onBlur);
+    _el$.addEventListener("focus", onFocus);
+    _el$.addEventListener("change", onChange);
+    const _ref$ = mergeRefs(radioContext.setInputRef, local.ref);
+    typeof _ref$ === "function" && use(_ref$, _el$);
+    spread(_el$, mergeProps({
+      get name() {
+        return formControlContext.name();
+      },
+      get value() {
+        return radioContext.value();
+      },
+      get checked() {
+        return radioContext.isSelected();
+      },
+      get required() {
+        return formControlContext.isRequired();
+      },
+      get disabled() {
+        return radioContext.isDisabled();
+      },
+      get readonly() {
+        return formControlContext.isReadOnly();
+      },
+      get style() {
+        return {
+          ...visuallyHiddenStyles,
+          ...local.style
+        };
+      },
+      get ["aria-labelledby"]() {
+        return ariaLabelledBy();
+      },
+      get ["aria-describedby"]() {
+        return ariaDescribedBy();
+      }
+    }, () => radioContext.dataset(), others), false, false);
+    return _el$;
+  })();
+}
+var _tmpl$$5 = /* @__PURE__ */ template(`<label>`);
+function RadioGroupItemLabel(props) {
+  const context = useRadioGroupItemContext();
+  props = mergeDefaultProps({
+    id: context.generateId("label")
+  }, props);
+  createEffect(() => onCleanup(context.registerLabel(props.id)));
+  return (() => {
+    const _el$ = _tmpl$$5();
+    spread(_el$, mergeProps({
+      get ["for"]() {
+        return context.inputId();
+      }
+    }, () => context.dataset(), props), false, false);
+    return _el$;
+  })();
+}
+function RadioGroupLabel(props) {
+  return createComponent(FormControlLabel, mergeProps({
+    as: "span"
+  }, props));
+}
+function RadioGroupRoot(props) {
+  let ref;
+  const defaultId = `radiogroup-${createUniqueId()}`;
+  props = mergeDefaultProps({
+    id: defaultId,
+    orientation: "vertical"
+  }, props);
+  const [local, formControlProps, others] = splitProps(props, ["ref", "value", "defaultValue", "onChange", "orientation", "aria-labelledby", "aria-describedby"], FORM_CONTROL_PROP_NAMES);
+  const [selected, setSelected] = createControllableSignal({
+    value: () => local.value,
+    defaultValue: () => local.defaultValue,
+    onChange: (value) => local.onChange?.(value)
+  });
+  const {
+    formControlContext
+  } = createFormControl(formControlProps);
+  createFormResetListener(() => ref, () => setSelected(local.defaultValue ?? ""));
+  const ariaLabelledBy = () => {
+    return formControlContext.getAriaLabelledBy(access(formControlProps.id), others["aria-label"], local["aria-labelledby"]);
+  };
+  const ariaDescribedBy = () => {
+    return formControlContext.getAriaDescribedBy(local["aria-describedby"]);
+  };
+  const isSelectedValue = (value) => {
+    return value === selected();
+  };
+  const context = {
+    ariaDescribedBy,
+    isSelectedValue,
+    setSelectedValue: (value) => {
+      if (formControlContext.isReadOnly() || formControlContext.isDisabled()) {
+        return;
+      }
+      setSelected(value);
+      ref?.querySelectorAll("[type='radio']").forEach((el) => {
+        const radio = el;
+        radio.checked = isSelectedValue(radio.value);
+      });
+    }
+  };
+  return createComponent(FormControlContext.Provider, {
+    value: formControlContext,
+    get children() {
+      return createComponent(RadioGroupContext.Provider, {
+        value: context,
+        get children() {
+          return createComponent(Polymorphic, mergeProps({
+            as: "div",
+            ref(r$) {
+              const _ref$ = mergeRefs((el) => ref = el, local.ref);
+              typeof _ref$ === "function" && _ref$(r$);
+            },
+            role: "radiogroup",
+            get id() {
+              return access(formControlProps.id);
+            },
+            get ["aria-invalid"]() {
+              return formControlContext.validationState() === "invalid" || void 0;
+            },
+            get ["aria-required"]() {
+              return formControlContext.isRequired() || void 0;
+            },
+            get ["aria-disabled"]() {
+              return formControlContext.isDisabled() || void 0;
+            },
+            get ["aria-readonly"]() {
+              return formControlContext.isReadOnly() || void 0;
+            },
+            get ["aria-orientation"]() {
+              return local.orientation;
+            },
+            get ["aria-labelledby"]() {
+              return ariaLabelledBy();
+            },
+            get ["aria-describedby"]() {
+              return ariaDescribedBy();
+            }
+          }, () => formControlContext.dataset(), others));
+        }
+      });
+    }
+  });
+}
+var index$7 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  Description: FormControlDescription,
+  ErrorMessage: FormControlErrorMessage,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemDescription: RadioGroupItemDescription,
+  ItemIndicator: RadioGroupItemIndicator,
+  ItemInput: RadioGroupItemInput,
+  ItemLabel: RadioGroupItemLabel,
+  Label: RadioGroupLabel,
+  Root: RadioGroupRoot
+});
 var SelectContext = createContext();
 var SwitchContext = createContext();
 var TabsContext = createContext();
@@ -8176,17 +8644,17 @@ var tokens = {
       900: "#054F31"
     },
     red: {
-      25: "#FFFBFA",
-      50: "#FEF3F2",
-      100: "#FEE4E2",
-      200: "#FECDCA",
-      300: "#FDA29B",
-      400: "#F97066",
-      500: "#F04438",
-      600: "#D92D20",
-      700: "#B42318",
-      800: "#912018",
-      900: "#7A271A"
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a"
     },
     yellow: {
       25: "#FFFCF5",
@@ -8269,35 +8737,35 @@ var tokens = {
   },
   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",
@@ -8322,55 +8790,55 @@ var tokens = {
   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: {
@@ -9447,6 +9915,12 @@ function getQueryStatusColor({
 }) {
   return queryState.fetchStatus === "fetching" ? "blue" : !observerCount ? "gray" : queryState.fetchStatus === "paused" ? "purple" : isStale ? "yellow" : "green";
 }
+function getMutationStatusColor({
+  status,
+  isPaused
+}) {
+  return isPaused ? "purple" : status === "error" ? "red" : status === "pending" ? "yellow" : status === "success" ? "green" : "gray";
+}
 function getQueryStatusColorByLabel(label) {
   return label === "fresh" ? "green" : label === "stale" ? "yellow" : label === "paused" ? "purple" : label === "inactive" ? "gray" : "blue";
 }
@@ -9468,6 +9942,18 @@ var sortFns = {
   "query hash": queryHashSort,
   "last updated": dateSort
 };
+var getMutationStatusRank = (m) => m.state.isPaused ? 0 : m.state.status === "error" ? 2 : m.state.status === "pending" ? 1 : 3;
+var mutationDateSort = (a2, b2) => a2.state.submittedAt < b2.state.submittedAt ? 1 : -1;
+var mutationStatusSort = (a2, b2) => {
+  if (getMutationStatusRank(a2) === getMutationStatusRank(b2)) {
+    return mutationDateSort(a2, b2);
+  }
+  return getMutationStatusRank(a2) > getMutationStatusRank(b2) ? 1 : -1;
+};
+var mutationSortFns = {
+  status: mutationStatusSort,
+  "last updated": mutationDateSort
+};
 var convertRemToPixels = (rem) => {
   return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
@@ -9867,51 +10353,122 @@ function Check(props) {
     /></svg></Show>
   </>;
 }
-function TanstackLogo() {
-  const id = createUniqueId();
-  return <svg version="1.0" viewBox="0 0 633 633">
-    <linearGradient
-      id={`a-${id}`}
-      x1="-666.45"
-      x2="-666.45"
-      y1="163.28"
-      y2="163.99"
-      gradientTransform="matrix(633 0 0 633 422177 -103358)"
-      gradientUnits="userSpaceOnUse"
-    >
-      <stop stop-color="#6BDAFF" offset="0" />
-      <stop stop-color="#F9FFB5" offset=".32" />
-      <stop stop-color="#FFA770" offset=".71" />
-      <stop stop-color="#FF7373" offset="1" />
-    </linearGradient>
-    <circle cx="316.5" cy="316.5" r="316.5" fill={`url(#a-${id})`} />
-    <defs><filter
-      id={`am-${id}`}
-      x="-137.5"
-      y="412"
-      width="454"
-      height="396.9"
-      filterUnits="userSpaceOnUse"
-    ><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" /></filter></defs>
-    <mask
-      id={`b-${id}`}
-      x="-137.5"
-      y="412"
-      width="454"
-      height="396.9"
-      maskUnits="userSpaceOnUse"
-    ><g filter={`url(#am-${id})`}><circle cx="316.5" cy="316.5" r="316.5" fill="#fff" /></g></mask>
-    <g mask={`url(#b-${id})`}><ellipse
-      cx="89.5"
-      cy="610.5"
-      rx="214.5"
-      ry="186"
-      fill="#015064"
-      stroke="#00CFE2"
-      stroke-width="25"
-    /></g>
-    <defs><filter
-      id={`ah-${id}`}
+function CheckCircle() {
+  return <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
+function LoadingCircle() {
+  return <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <animateTransform
+      attributeName="transform"
+      attributeType="XML"
+      type="rotate"
+      from="0"
+      to="360"
+      dur="2s"
+      repeatCount="indefinite"
+    />
+  </svg>;
+}
+function XCircle() {
+  return <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
+function PauseCircle() {
+  return <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M9.5 15V9M14.5 15V9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  /></svg>;
+}
+function TanstackLogo() {
+  const id = createUniqueId();
+  return <svg version="1.0" viewBox="0 0 633 633">
+    <linearGradient
+      id={`a-${id}`}
+      x1="-666.45"
+      x2="-666.45"
+      y1="163.28"
+      y2="163.99"
+      gradientTransform="matrix(633 0 0 633 422177 -103358)"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#6BDAFF" offset="0" />
+      <stop stop-color="#F9FFB5" offset=".32" />
+      <stop stop-color="#FFA770" offset=".71" />
+      <stop stop-color="#FF7373" offset="1" />
+    </linearGradient>
+    <circle cx="316.5" cy="316.5" r="316.5" fill={`url(#a-${id})`} />
+    <defs><filter
+      id={`am-${id}`}
+      x="-137.5"
+      y="412"
+      width="454"
+      height="396.9"
+      filterUnits="userSpaceOnUse"
+    ><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" /></filter></defs>
+    <mask
+      id={`b-${id}`}
+      x="-137.5"
+      y="412"
+      width="454"
+      height="396.9"
+      maskUnits="userSpaceOnUse"
+    ><g filter={`url(#am-${id})`}><circle cx="316.5" cy="316.5" r="316.5" fill="#fff" /></g></mask>
+    <g mask={`url(#b-${id})`}><ellipse
+      cx="89.5"
+      cy="610.5"
+      rx="214.5"
+      ry="186"
+      fill="#015064"
+      stroke="#00CFE2"
+      stroke-width="25"
+    /></g>
+    <defs><filter
+      id={`ah-${id}`}
       x="316.5"
       y="412"
       width="454"
@@ -10950,8 +11507,8 @@ var stylesFactory = (theme) => {
     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`
@@ -10959,7 +11516,7 @@ var stylesFactory = (theme) => {
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size2[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -11001,8 +11558,8 @@ var stylesFactory = (theme) => {
       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`
@@ -11065,9 +11622,13 @@ var DEFAULT_HEIGHT = 500;
 var DEFAULT_WIDTH = 500;
 var DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
 var DEFAULT_SORT_ORDER = 1;
+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 DevtoolsComponent = (props) => {
   const [localStore, setLocalStore] = createLocalStorage({
@@ -11098,8 +11659,9 @@ var Devtools = (props) => {
   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();
@@ -11112,6 +11674,18 @@ var Devtools = (props) => {
       `${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 <div
     class={clsx(
       u`
@@ -11137,6 +11711,7 @@ var Devtools = (props) => {
         `,
       "tsqd-transitions-container"
     )}
+    ref={transitionsContainerRef}
   >
     <TransitionGroup name="tsqd-panel-transition"><Show when={isOpen()}><DevtoolsPanel
       localStore={props.localStore}
@@ -11162,37 +11737,9 @@ var DevtoolsPanel = (props) => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
   });
   const [isResizing, setIsResizing] = createSignal(false);
-  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
-  const sortOrder = createMemo(
-    () => Number(props.localStore.sortOrder) || DEFAULT_SORT_ORDER
-  );
-  const [offline, setOffline] = createSignal(false);
   const position = createMemo(
     () => props.localStore.position || useQueryDevtoolsContext().position || POSITION
   );
-  const sortFn = createMemo(() => sortFns[sort()]);
-  const onlineManager = createMemo(
-    () => useQueryDevtoolsContext().onlineManager
-  );
-  const cache = createMemo(() => {
-    return useQueryDevtoolsContext().client.getQueryCache();
-  });
-  const queryCount = createSubscribeToQueryCacheBatcher((queryCache) => {
-    return queryCache().getAll().length;
-  }, false);
-  const queries = createMemo(
-    on(
-      () => [queryCount(), props.localStore.filter, sort(), sortOrder()],
-      () => {
-        const curr = cache().getAll();
-        const filtered = props.localStore.filter ? curr.filter(
-          (item) => rankItem(item.queryHash, props.localStore.filter || "").passed
-        ) : [...curr];
-        const sorted = sortFn() ? filtered.sort((a2, b2) => sortFn()(a2, b2) * sortOrder()) : filtered;
-        return sorted;
-      }
-    )
-  );
   const handleDragStart = (event) => {
     const panelElement = event.currentTarget.parentElement;
     if (!panelElement)
@@ -11237,8 +11784,6 @@ var DevtoolsPanel = (props) => {
     document.addEventListener("mousemove", runDrag, false);
     document.addEventListener("mouseup", unsub, false);
   };
-  setupQueryCacheSubscription();
-  let queriesContainerRef;
   let panelRef;
   onMount(() => {
     createResizeObserver(panelRef, ({ width }, el) => {
@@ -11247,9 +11792,6 @@ var DevtoolsPanel = (props) => {
       }
     });
   });
-  const setDevtoolsPosition = (pos) => {
-    props.setLocalStore("position", pos);
-  };
   createEffect(() => {
     const rootContainer = panelRef.parentElement?.parentElement?.parentElement;
     if (!rootContainer)
@@ -11327,46 +11869,156 @@ var DevtoolsPanel = (props) => {
       )}
       onClick={() => props.setLocalStore("open", "false")}
     ><ChevronDown /></button>
+    <ContentView
+      localStore={props.localStore}
+      setLocalStore={props.setLocalStore}
+    />
+  </aside>;
+};
+var ContentView = (props) => {
+  setupQueryCacheSubscription();
+  setupMutationCacheSubscription();
+  let containerRef;
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const [selectedView, setSelectedView] = createSignal(
+    "queries"
+  );
+  const sort = createMemo(() => props.localStore.sort || DEFAULT_SORT_FN_NAME);
+  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
+  );
+  const query_cache = createMemo(() => {
+    return useQueryDevtoolsContext().client.getQueryCache();
+  });
+  const mutation_cache = createMemo(() => {
+    return useQueryDevtoolsContext().client.getMutationCache();
+  });
+  const queryCount = createSubscribeToQueryCacheBatcher((queryCache) => {
+    return queryCache().getAll().length;
+  }, false);
+  const queries = createMemo(
+    on(
+      () => [queryCount(), props.localStore.filter, sort(), sortOrder()],
+      () => {
+        const curr = query_cache().getAll();
+        const filtered = props.localStore.filter ? curr.filter(
+          (item) => rankItem(item.queryHash, props.localStore.filter || "").passed
+        ) : [...curr];
+        const sorted = sortFn() ? filtered.sort((a2, b2) => sortFn()(a2, b2) * sortOrder()) : filtered;
+        return sorted;
+      }
+    )
+  );
+  const mutationCount = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => {
+      return mutationCache().getAll().length;
+    },
+    false
+  );
+  const mutations = createMemo(
+    on(
+      () => [
+        mutationCount(),
+        props.localStore.mutationFilter,
+        mutationSort(),
+        mutationSortOrder()
+      ],
+      () => {
+        const curr = mutation_cache().getAll();
+        const filtered = props.localStore.mutationFilter ? curr.filter((item) => {
+          const value = `${item.options.mutationKey ? JSON.stringify(item.options.mutationKey) + " - " : ""}${new Date(item.state.submittedAt).toLocaleString()}`;
+          return rankItem(value, props.localStore.mutationFilter || "").passed;
+        }) : [...curr];
+        const sorted = mutationSortFn() ? filtered.sort(
+          (a2, b2) => mutationSortFn()(a2, b2) * mutationSortOrder()
+        ) : filtered;
+        return sorted;
+      }
+    )
+  );
+  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 <>
     <div
-      ref={queriesContainerRef}
       class={clsx(
         styles().queriesContainer,
-        panelWidth() < secondBreakpoint && selectedQueryHash() && u`
+        panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
             `,
         "tsqd-queries-container"
       )}
+      ref={containerRef}
     >
       <div class={clsx(styles().row, "tsqd-header")}>
-        <button
-          class={clsx(styles().logo, "tsqd-text-logo-container")}
-          onClick={() => props.setLocalStore("open", "false")}
-          aria-label="Close Tanstack query devtools"
-        >
-          <span class={clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack")}>TANSTACK</span>
-          <span
-            class={clsx(
-              styles().queryFlavorLogo,
-              "tsqd-text-logo-query-flavor"
-            )}
+        <div class={styles().logoAndToggleContainer}>
+          <button
+            class={clsx(styles().logo, "tsqd-text-logo-container")}
+            onClick={() => props.setLocalStore("open", "false")}
+            aria-label="Close Tanstack query devtools"
           >
-            {useQueryDevtoolsContext().queryFlavor}
-            {" v"}
-            {useQueryDevtoolsContext().version}
-          </span>
-        </button>
-        <QueryStatusCount />
+            <span
+              class={clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack")}
+            >TANSTACK</span>
+            <span
+              class={clsx(
+                styles().queryFlavorLogo,
+                "tsqd-text-logo-query-flavor"
+              )}
+            >
+              {useQueryDevtoolsContext().queryFlavor}
+              {" v"}
+              {useQueryDevtoolsContext().version}
+            </span>
+          </button>
+          <index$7.Root
+            class={clsx(styles().viewToggle)}
+            value={selectedView()}
+            onChange={(value) => {
+              setSelectedView(value);
+              setSelectedQueryHash(null);
+              setSelectedMutationId(null);
+            }}
+          >
+            <index$7.Item value="queries" class="tsqd-radio-toggle">
+              <index$7.ItemInput />
+              <index$7.ItemControl><index$7.ItemIndicator /></index$7.ItemControl>
+              <index$7.ItemLabel title="Toggle Queries View">Queries</index$7.ItemLabel>
+            </index$7.Item>
+            <index$7.Item value="mutations" class="tsqd-radio-toggle">
+              <index$7.ItemInput />
+              <index$7.ItemControl><index$7.ItemIndicator /></index$7.ItemControl>
+              <index$7.ItemLabel title="Toggle Mutations View">Mutations</index$7.ItemLabel>
+            </index$7.Item>
+          </index$7.Root>
+        </div>
+        <Show when={selectedView() === "queries"}><QueryStatusCount /></Show>
+        <Show when={selectedView() === "mutations"}><MutationStatusCount /></Show>
       </div>
-      <div
-        class={clsx(
-          styles().row,
-          u`
-              gap: ${tokens.size[2.5]};
-            `,
-          "tsqd-filters-actions-container"
-        )}
-      >
+      <div class={clsx(styles().row, "tsqd-filters-actions-container")}>
         <div class={clsx(styles().filtersContainer, "tsqd-filters-container")}>
           <div
             class={clsx(
@@ -11379,9 +12031,15 @@ var DevtoolsPanel = (props) => {
               aria-label="Filter queries by query key"
               type="text"
               placeholder="Filter"
-              onInput={(e2) => props.setLocalStore("filter", e2.currentTarget.value)}
+              onInput={(e2) => {
+                if (selectedView() === "queries") {
+                  props.setLocalStore("filter", e2.currentTarget.value);
+                } else {
+                  props.setLocalStore("mutationFilter", e2.currentTarget.value);
+                }
+              }}
               class="tsqd-query-filter-textfield"
-              value={props.localStore.filter || ""}
+              value={selectedView() === "queries" ? props.localStore.filter || "" : props.localStore.mutationFilter || ""}
             />
           </div>
           <div
@@ -11390,28 +12048,50 @@ var DevtoolsPanel = (props) => {
               "tsqd-query-filter-sort-container"
             )}
           >
-            <select
+            <Show when={selectedView() === "queries"}><select
               value={sort()}
-              onChange={(e2) => props.setLocalStore("sort", e2.currentTarget.value)}
+              onChange={(e2) => {
+                props.setLocalStore("sort", e2.currentTarget.value);
+              }}
             >{Object.keys(sortFns).map((key) => <option value={key}>
               {"Sort by "}
               {key}
-            </option>)}</select>
+            </option>)}</select></Show>
+            <Show when={selectedView() === "mutations"}><select
+              value={mutationSort()}
+              onChange={(e2) => {
+                props.setLocalStore("mutationSort", e2.currentTarget.value);
+              }}
+            >{Object.keys(mutationSortFns).map((key) => <option value={key}>
+              {"Sort by "}
+              {key}
+            </option>)}</select></Show>
             <ChevronDown />
           </div>
           <button
             onClick={() => {
-              props.setLocalStore("sortOrder", String(sortOrder() * -1));
+              if (selectedView() === "queries") {
+                props.setLocalStore("sortOrder", String(sortOrder() * -1));
+              } else {
+                props.setLocalStore(
+                  "mutationSortOrder",
+                  String(mutationSortOrder() * -1)
+                );
+              }
             }}
-            aria-label={`Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`}
-            aria-pressed={sortOrder() === -1}
+            aria-label={`Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`}
+            aria-pressed={(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1}
             class="tsqd-query-filter-sort-order-btn"
           >
-            <Show when={sortOrder() === 1}>
+            <Show
+              when={(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === 1}
+            >
               <span>Asc</span>
               <ArrowUp />
             </Show>
-            <Show when={sortOrder() === -1}>
+            <Show
+              when={(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1}
+            >
               <span>Desc</span>
               <ArrowDown />
             </Show>
@@ -11420,7 +12100,11 @@ var DevtoolsPanel = (props) => {
         <div class={clsx(styles().actionsContainer, "tsqd-actions-container")}>
           <button
             onClick={() => {
-              cache().clear();
+              if (selectedView() === "queries") {
+                query_cache().clear();
+              } else {
+                mutation_cache().clear();
+              }
             }}
             class={clsx(
               styles().actionsBtn,
@@ -11428,7 +12112,7 @@ var DevtoolsPanel = (props) => {
               "tsqd-action-clear-cache"
             )}
             aria-label="Clear query cache"
-            title="Clear query cache"
+            title={`Clear ${selectedView()} cache`}
           ><Trash /></button>
           <button
             onClick={() => {
@@ -11458,7 +12142,9 @@ var DevtoolsPanel = (props) => {
                 "tsqd-action-settings"
               )}
             ><Settings /></index$d.Trigger>
-            <index$d.Portal><index$d.Content
+            <index$d.Portal
+              ref={(el) => setComputedVariables(el)}
+            ><index$d.Content
               class={clsx(styles().settingsMenu, "tsqd-settings-menu")}
             >
               <div
@@ -11478,7 +12164,9 @@ var DevtoolsPanel = (props) => {
                   <span>Position</span>
                   <ChevronDown />
                 </index$d.SubTrigger>
-                <index$d.Portal><index$d.SubContent
+                <index$d.Portal
+                  ref={(el) => setComputedVariables(el)}
+                ><index$d.SubContent
                   class={clsx(
                     styles().settingsMenu,
                     "tsqd-settings-submenu"
@@ -11553,7 +12241,9 @@ var DevtoolsPanel = (props) => {
                   <span>Theme</span>
                   <ChevronDown />
                 </index$d.SubTrigger>
-                <index$d.Portal><index$d.SubContent
+                <index$d.Portal
+                  ref={(el) => setComputedVariables(el)}
+                ><index$d.SubContent
                   class={clsx(
                     styles().settingsMenu,
                     "tsqd-settings-submenu"
@@ -11610,15 +12300,22 @@ var DevtoolsPanel = (props) => {
           </index$d.Root>
         </div>
       </div>
-      <div
+      <Show when={selectedView() === "queries"}><div
         class={clsx(
           styles().overflowQueryContainer,
           "tsqd-queries-overflow-container"
         )}
-      ><div class="tsqd-queries-container"><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div>
+      ><div class="tsqd-queries-container"><Key by={(q) => q.queryHash} each={queries()}>{(query) => <QueryRow query={query()} />}</Key></div></div></Show>
+      <Show when={selectedView() === "mutations"}><div
+        class={clsx(
+          styles().overflowQueryContainer,
+          "tsqd-mutations-overflow-container"
+        )}
+      ><div class="tsqd-mutations-container"><Key by={(m) => m.mutationId} each={mutations()}>{(mutation) => <MutationRow mutation={mutation()} />}</Key></div></div></Show>
     </div>
-    <Show when={selectedQueryHash()}><QueryDetails /></Show>
-  </aside>;
+    <Show when={selectedView() === "queries" && selectedQueryHash()}><QueryDetails /></Show>
+    <Show when={selectedView() === "mutations" && selectedMutationId()}><MutationDetails /></Show>
+  </>;
 };
 var QueryRow = (props) => {
   const theme = useTheme();
@@ -11687,6 +12384,94 @@ var QueryRow = (props) => {
     <Show when={isDisabled()}><div class="tsqd-query-disabled-indicator">disabled</div></Show>
   </button></Show>;
 };
+var MutationRow = (props) => {
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const { colors, alpha } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
+  const mutationState = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => {
+      const mutations = mutationCache().getAll();
+      const mutation = mutations.find(
+        (m) => m.mutationId === props.mutation.mutationId
+      );
+      return mutation?.state;
+    }
+  );
+  const isPaused = createSubscribeToMutationCacheBatcher((mutationCache) => {
+    const mutations = mutationCache().getAll();
+    const mutation = mutations.find(
+      (m) => m.mutationId === props.mutation.mutationId
+    );
+    if (!mutation)
+      return false;
+    return mutation.state.isPaused;
+  });
+  const status = createSubscribeToMutationCacheBatcher((mutationCache) => {
+    const mutations = mutationCache().getAll();
+    const mutation = mutations.find(
+      (m) => m.mutationId === props.mutation.mutationId
+    );
+    if (!mutation)
+      return "idle";
+    return mutation.state.status;
+  });
+  const color = createMemo(
+    () => getMutationStatusColor({
+      isPaused: isPaused(),
+      status: status()
+    })
+  );
+  const getObserverCountColorStyles = () => {
+    if (color() === "gray") {
+      return u`
+        background-color: ${t2(colors[color()][200], colors[color()][700])};
+        color: ${t2(colors[color()][700], colors[color()][300])};
+      `;
+    }
+    return u`
+      background-color: ${t2(
+      colors[color()][200] + alpha[80],
+      colors[color()][900]
+    )};
+      color: ${t2(colors[color()][800], colors[color()][300])};
+    `;
+  };
+  return <Show when={mutationState()}><button
+    onClick={() => {
+      setSelectedMutationId(
+        props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId
+      );
+    }}
+    class={clsx(
+      styles().queryRow,
+      selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow,
+      "tsqd-query-row"
+    )}
+    aria-label={`Mutation submitted at ${new Date(
+      props.mutation.state.submittedAt
+    ).toLocaleString()}`}
+  >
+    <div
+      class={clsx(getObserverCountColorStyles(), "tsqd-query-observer-count")}
+    >
+      <Show when={color() === "purple"}><PauseCircle /></Show>
+      <Show when={color() === "green"}><CheckCircle /></Show>
+      <Show when={color() === "red"}><XCircle /></Show>
+      <Show when={color() === "yellow"}><LoadingCircle /></Show>
+    </div>
+    <code class="tsqd-query-hash">
+      <Show when={props.mutation.options.mutationKey}>
+        {JSON.stringify(props.mutation.options.mutationKey)}
+        {" -"}
+        {" "}
+      </Show>
+      {new Date(props.mutation.state.submittedAt).toLocaleString()}
+    </code>
+  </button></Show>;
+};
 var QueryStatusCount = () => {
   const stale = createSubscribeToQueryCacheBatcher(
     (queryCache) => queryCache().getAll().filter((q) => getQueryStatusLabel(q) === "stale").length
@@ -11717,6 +12502,52 @@ var QueryStatusCount = () => {
     <QueryStatus label="Inactive" color="gray" count={inactive()} />
   </div>;
 };
+var MutationStatusCount = () => {
+  const success = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => mutationCache().getAll().filter(
+      (m) => getMutationStatusColor({
+        isPaused: m.state.isPaused,
+        status: m.state.status
+      }) === "green"
+    ).length
+  );
+  const pending = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => mutationCache().getAll().filter(
+      (m) => getMutationStatusColor({
+        isPaused: m.state.isPaused,
+        status: m.state.status
+      }) === "yellow"
+    ).length
+  );
+  const paused = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => mutationCache().getAll().filter(
+      (m) => getMutationStatusColor({
+        isPaused: m.state.isPaused,
+        status: m.state.status
+      }) === "purple"
+    ).length
+  );
+  const error = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => mutationCache().getAll().filter(
+      (m) => getMutationStatusColor({
+        isPaused: m.state.isPaused,
+        status: m.state.status
+      }) === "red"
+    ).length
+  );
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  return <div
+    class={clsx(styles().queryStatusContainer, "tsqd-query-status-container")}
+  >
+    <QueryStatus label="Paused" color="purple" count={paused()} />
+    <QueryStatus label="Pending" color="yellow" count={pending()} />
+    <QueryStatus label="Success" color="green" count={success()} />
+    <QueryStatus label="Error" color="red" count={error()} />
+  </div>;
+};
 var QueryStatus = (props) => {
   const theme = useTheme();
   const styles = createMemo(() => {
@@ -12102,7 +12933,7 @@ var QueryDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"
     ><Explorer
@@ -12115,7 +12946,7 @@ var QueryDetails = () => {
     <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Query Explorer</div>
     <div
       style={{
-        padding: "0.5rem"
+        padding: tokens.size[2]
       }}
       class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
     ><Explorer
@@ -12125,21 +12956,145 @@ var QueryDetails = () => {
     /></div>
   </div></Show>;
 };
-var signalsMap = /* @__PURE__ */ new Map();
+var MutationDetails = () => {
+  const theme = useTheme();
+  const styles = createMemo(() => {
+    return theme() === "dark" ? darkStyles2 : lightStyles2;
+  });
+  const { colors } = tokens;
+  const t2 = (light, dark) => theme() === "dark" ? dark : light;
+  const isPaused = createSubscribeToMutationCacheBatcher((mutationCache) => {
+    const mutations = mutationCache().getAll();
+    const mutation = mutations.find(
+      (m) => m.mutationId === selectedMutationId()
+    );
+    if (!mutation)
+      return false;
+    return mutation.state.isPaused;
+  });
+  const status = createSubscribeToMutationCacheBatcher((mutationCache) => {
+    const mutations = mutationCache().getAll();
+    const mutation = mutations.find(
+      (m) => m.mutationId === selectedMutationId()
+    );
+    if (!mutation)
+      return "idle";
+    return mutation.state.status;
+  });
+  const color = createMemo(
+    () => getMutationStatusColor({
+      isPaused: isPaused(),
+      status: status()
+    })
+  );
+  const activeMutation = createSubscribeToMutationCacheBatcher(
+    (mutationCache) => mutationCache().getAll().find((mutation) => mutation.mutationId === selectedMutationId()),
+    false
+  );
+  const getQueryStatusColors = () => {
+    if (color() === "gray") {
+      return u`
+        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`
+      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])};
+    `;
+  };
+  return <Show when={activeMutation()}><div
+    class={clsx(styles().detailsContainer, "tsqd-query-details-container")}
+  >
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Mutation Details</div>
+    <div
+      class={clsx(
+        styles().detailsBody,
+        "tsqd-query-details-summary-container"
+      )}
+    >
+      <div class="tsqd-query-details-summary">
+        <pre><code><Show
+          when={activeMutation().options.mutationKey}
+          fallback="No mutationKey found"
+        >{displayValue(activeMutation().options.mutationKey, true)}</Show></code></pre>
+        <span
+          class={clsx(styles().queryDetailsStatus, getQueryStatusColors())}
+        >
+          <Show when={color() === "purple"}>pending</Show>
+          <Show when={color() !== "purple"}>{status()}</Show>
+        </span>
+      </div>
+      <div class="tsqd-query-details-last-updated">
+        <span>Submitted At:</span>
+        <span>{new Date(
+          activeMutation().state.submittedAt
+        ).toLocaleTimeString()}</span>
+      </div>
+    </div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Variables Details</div>
+    <div
+      style={{
+        padding: tokens.size[2]
+      }}
+      class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
+    ><Explorer
+      label="Variables"
+      defaultExpanded={["Variables"]}
+      value={activeMutation().state.variables}
+    /></div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Context Details</div>
+    <div
+      style={{
+        padding: tokens.size[2]
+      }}
+      class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
+    ><Explorer
+      label="Context"
+      defaultExpanded={["Context"]}
+      value={activeMutation().state.context}
+    /></div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Data Explorer</div>
+    <div
+      style={{
+        padding: tokens.size[2]
+      }}
+      class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
+    ><Explorer
+      label="Data"
+      defaultExpanded={["Data"]}
+      value={activeMutation().state.data}
+    /></div>
+    <div class={clsx(styles().detailsHeader, "tsqd-query-details-header")}>Mutations Explorer</div>
+    <div
+      style={{
+        padding: tokens.size[2]
+      }}
+      class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"
+    ><Explorer
+      label="Mutation"
+      defaultExpanded={["Mutation"]}
+      value={activeMutation()}
+    /></div>
+  </div></Show>;
+};
+var queryCacheMap = /* @__PURE__ */ new Map();
 var setupQueryCacheSubscription = () => {
   const queryCache = createMemo(() => {
     const client = useQueryDevtoolsContext().client;
     return client.getQueryCache();
   });
   const unsub = queryCache().subscribe(() => {
-    for (const [callback, setter] of signalsMap.entries()) {
+    for (const [callback, setter] of queryCacheMap.entries()) {
       queueMicrotask(() => {
         setter(callback(queryCache));
       });
     }
   });
   onCleanup(() => {
-    signalsMap.clear();
+    queryCacheMap.clear();
     unsub();
   });
   return unsub;
@@ -12156,9 +13111,46 @@ var createSubscribeToQueryCacheBatcher = (callback, equalityCheck = true) => {
   createEffect(() => {
     setValue(callback(queryCache));
   });
-  signalsMap.set(callback, setValue);
+  queryCacheMap.set(callback, setValue);
+  onCleanup(() => {
+    queryCacheMap.delete(callback);
+  });
+  return value;
+};
+var mutationCacheMap = /* @__PURE__ */ new Map();
+var setupMutationCacheSubscription = () => {
+  const mutationCache = createMemo(() => {
+    const client = useQueryDevtoolsContext().client;
+    return client.getMutationCache();
+  });
+  const unsub = mutationCache().subscribe(() => {
+    for (const [callback, setter] of mutationCacheMap.entries()) {
+      queueMicrotask(() => {
+        setter(callback(mutationCache));
+      });
+    }
+  });
+  onCleanup(() => {
+    mutationCacheMap.clear();
+    unsub();
+  });
+  return unsub;
+};
+var createSubscribeToMutationCacheBatcher = (callback, equalityCheck = true) => {
+  const mutationCache = createMemo(() => {
+    const client = useQueryDevtoolsContext().client;
+    return client.getMutationCache();
+  });
+  const [value, setValue] = createSignal(
+    callback(mutationCache),
+    !equalityCheck ? { equals: false } : void 0
+  );
+  createEffect(() => {
+    setValue(callback(mutationCache));
+  });
+  mutationCacheMap.set(callback, setValue);
   onCleanup(() => {
-    signalsMap.delete(callback);
+    mutationCacheMap.delete(callback);
   });
   return value;
 };
@@ -12251,7 +13243,7 @@ var stylesFactory2 = (theme) => {
       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`
@@ -12259,7 +13251,7 @@ var stylesFactory2 = (theme) => {
       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`
@@ -12433,7 +13425,7 @@ var stylesFactory2 = (theme) => {
       justify-content: space-between;
       align-items: center;
       padding: ${tokens.size[2]} ${tokens.size[2.5]};
-      gap: ${tokens.size[3]};
+      gap: ${tokens.size[2.5]};
       border-bottom: ${t2(colors.gray[300], colors.darkGray[500])} 1px solid;
       align-items: center;
       & > button {
@@ -12445,8 +13437,19 @@ var stylesFactory2 = (theme) => {
         flex-direction: column;
       }
     `,
+    logoAndToggleContainer: u`
+      display: flex;
+      gap: ${tokens.size[3]};
+      align-items: center;
+    `,
     logo: u`
       cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      background-color: transparent;
+      border: none;
+      gap: ${tokens.size[0.5]};
+      padding: 0px;
       &:hover {
         opacity: 0.7;
       }
@@ -12580,6 +13583,8 @@ var stylesFactory2 = (theme) => {
           outline: 2px solid ${colors.blue[800]};
         }
         & svg {
+          width: ${tokens.size[3]};
+          height: ${tokens.size[3]};
           color: ${t2(colors.gray[500], colors.gray[400])};
         }
       }
@@ -12665,8 +13670,8 @@ var stylesFactory2 = (theme) => {
       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;
@@ -12818,6 +13823,8 @@ var stylesFactory2 = (theme) => {
 
       & pre {
         margin: 0;
+        display: flex;
+        align-items: center;
       }
     `,
     queryDetailsStatus: u`
@@ -12997,6 +14004,56 @@ var stylesFactory2 = (theme) => {
       &:hover {
         background-color: ${t2(colors.purple[100], colors.purple[900])};
       }
+    `,
+    viewToggle: u`
+      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])};
+      display: flex;
+      padding: 0;
+      font-size: ${font.size.xs};
+      color: ${t2(colors.gray[700], colors.gray[300])};
+      overflow: hidden;
+
+      &:has(:focus-visible) {
+        outline: 2px solid ${colors.blue[800]};
+      }
+
+      & .tsqd-radio-toggle {
+        opacity: 0.5;
+        display: flex;
+        & label {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          line-height: ${font.lineHeight.md};
+        }
+
+        & label:hover {
+          background-color: ${t2(colors.gray[100], colors.darkGray[500])};
+        }
+      }
+
+      & > [data-checked] {
+        opacity: 1;
+        background-color: ${t2(colors.gray[100], colors.darkGray[400])};
+        & label:hover {
+          background-color: ${t2(colors.gray[100], colors.darkGray[400])};
+        }
+      }
+
+      & .tsqd-radio-toggle:first-child {
+        & label {
+          padding: 0 ${tokens.size[1.5]} 0 ${tokens.size[2]};
+        }
+        border-right: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & .tsqd-radio-toggle:nth-child(2) {
+        & label {
+          padding: 0 ${tokens.size[2]} 0 ${tokens.size[1.5]};
+        }
+      }
     `
   };
 };
@@ -13006,6 +14063,8 @@ export {
   Devtools,
   DevtoolsComponent,
   DevtoolsPanel,
+  MutationRow,
+  MutationStatusCount,
   QueryRow,
   QueryStatus,
   QueryStatusCount,
@@ -13217,8 +14276,6 @@ export {
    * Credits to the zag team:
    * https://github.com/chakra-ui/zag/blob/c1e6c7689b22bf58741ded7cf224dd9baec2a046/packages/utilities/form-utils/src/form.ts
    *)
-
-@kobalte/core/dist/esm/index.js:
   (*!
    * Portions of this file are based on code from react-spectrum.
    * Apache License Version 2.0, Copyright 2020 Adobe.