@tanstack/query-devtools 5.0.5 → 5.4.2

package/build/Devtools/{3Y5CBXUA.js → MVUALMJ4.js}

@@ -1,4 +1,4 @@
-import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, insert, Show, createRenderEffect, className, on, onMount, setAttribute, spread, mergeProps, For, onCleanup, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, template, use, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/Z53XT47W.js';
+import { createContext, delegateEvents, createSignal, createMemo, createComponent, createEffect, onMount, onCleanup, use, insert, Show, createRenderEffect, className, on, setAttribute, spread, mergeProps, For, isServer, $PROXY, $TRACK, getListener, batch, createUniqueId, useContext, Index, template, untrack, useTransition, createRoot, splitProps, Portal, addEventListener, Switch, Match, Dynamic, children, createComputed, getOwner, DEV } from '../chunk/Z53XT47W.js';
 
 // ../../node_modules/.pnpm/@tanstack+match-sorter-utils@8.8.4/node_modules/@tanstack/match-sorter-utils/build/lib/index.mjs
 var characterMap = {
@@ -3987,6 +3987,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(() => {
@@ -4422,7 +4445,72 @@ function createToggleState(props = {}) {
     toggle
   };
 }
-createContext();
+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) {
@@ -4473,6 +4561,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) {
@@ -7845,8 +7987,332 @@ createContext();
 createContext();
 createContext();
 createContext();
-createContext();
-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
+});
 createContext();
 createContext();
 createContext();
@@ -7951,17 +8417,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",
@@ -8044,35 +8510,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",
@@ -8097,55 +8563,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: {
@@ -9212,6 +9678,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";
 }
@@ -9235,6 +9707,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);
 };
@@ -9349,7 +9833,11 @@ var _tmpl$13 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24
 var _tmpl$14 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none xmlns=http://www.w3.org/2000/svg><path d="M9 9L15 15M15 9L9 15M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"stroke=#F04438 stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
 var _tmpl$15 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 xmlns=http://www.w3.org/2000/svg><rect class=list width=20 height=20 y=2 x=2 rx=2></rect><line class=list-item y1=7 y2=7 x1=6 x2=18></line><line class=list-item y2=12 y1=12 x1=6 x2=18></line><line class=list-item y1=17 y2=17 x1=6 x2=18>`);
 var _tmpl$16 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"height=20 width=20 fill=none xmlns=http://www.w3.org/2000/svg><path d="M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2V7.8Z"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
-var _tmpl$17 = /* @__PURE__ */ template(`<svg version=1.0 viewBox="0 0 633 633"><linearGradient 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 stop-color=#F9FFB5 offset=.32></stop><stop stop-color=#FFA770 offset=.71></stop><stop stop-color=#FF7373 offset=1></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5></circle><defs><filter 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"></feColorMatrix></filter></defs><mask x=-137.5 y=412 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=610.5 rx=214.5 ry=186 fill=#015064 stroke=#00CFE2 stroke-width=25></ellipse></g><defs><filter x=316.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"></feColorMatrix></filter></defs><mask x=316.5 y=412 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=610.5 rx=214.5 ry=186 fill=#015064 stroke=#00CFE2 stroke-width=25></ellipse></g><defs><filter x=-137.5 y=450 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"></feColorMatrix></filter></defs><mask x=-137.5 y=450 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=648.5 rx=214.5 ry=186 fill=#015064 stroke=#00A8B8 stroke-width=25></ellipse></g><defs><filter x=316.5 y=450 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"></feColorMatrix></filter></defs><mask x=316.5 y=450 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=648.5 rx=214.5 ry=186 fill=#015064 stroke=#00A8B8 stroke-width=25></ellipse></g><defs><filter x=-137.5 y=486 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"></feColorMatrix></filter></defs><mask x=-137.5 y=486 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=684.5 rx=214.5 ry=186 fill=#015064 stroke=#007782 stroke-width=25></ellipse></g><defs><filter x=316.5 y=486 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"></feColorMatrix></filter></defs><mask x=316.5 y=486 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=684.5 rx=214.5 ry=186 fill=#015064 stroke=#007782 stroke-width=25></ellipse></g><defs><filter x=272.2 y=308 width=176.9 height=129.3 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=272.2 y=308 width=176.9 height=129.3 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><line x1=436 x2=431 y1=403.2 y2=431.8 fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11></line><line x1=291 x2=280 y1=341.5 y2=403.5 fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11></line><line x1=332.9 x2=328.6 y1=384.1 y2=411.2 fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11></line><linearGradient x1=-670.75 x2=-671.59 y1=164.4 y2=164.49 gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)"gradientUnits=userSpaceOnUse><stop stop-color=#EE2700 offset=0></stop><stop stop-color=#FF008E offset=1></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd fill-rule=evenodd></path><line x1=428.2 x2=429.1 y1=384.5 y2=378 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=395.2 x2=396.1 y1=379.5 y2=373 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=362.2 x2=363.1 y1=373.5 y2=367.4 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=324.2 x2=328.4 y1=351.3 y2=347.4 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=303.2 x2=307.4 y1=331.3 y2=327.4 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line></g><defs><filter x=73.2 y=113.8 width=280.6 height=317.4 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=73.2 y=113.8 width=280.6 height=317.4 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient x1=-672.16 x2=-672.16 y1=165.03 y2=166.03 gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)"gradientUnits=userSpaceOnUse><stop stop-color=#A17500 offset=0></stop><stop stop-color=#5D2100 offset=1></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6"clip-rule=evenodd fill-rule=evenodd></path><g stroke=#2F8A00><linearGradient x1=-660.23 x2=-660.23 y1=166.72 y2=167.72 gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-661.36 x2=-661.36 y1=164.18 y2=165.18 gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-656.79 x2=-656.79 y1=165.15 y2=166.15 gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-663.07 x2=-663.07 y1=165.44 y2=166.44 gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-662.57 x2=-662.57 y1=164.44 y2=165.44 gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-656.43 x2=-656.43 y1=163.86 y2=164.86 gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1"fill=none stroke-linecap=round stroke-width=8></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8"fill=none stroke-linecap=round stroke-width=8></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9"fill=none stroke-linecap=round stroke-width=8></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32"fill=none stroke-linecap=round stroke-width=8></path></g></g><defs><filter x=50.5 y=399 width=532 height=633 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=50.5 y=399 width=532 height=633 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient x1=-666.06 x2=-666.23 y1=163.36 y2=163.75 gradientTransform="matrix(532 0 0 633 354760 -102959)"gradientUnits=userSpaceOnUse><stop stop-color=#FFF400 offset=0></stop><stop stop-color=#3C8700 offset=1></stop></linearGradient><ellipse cx=316.5 cy=715.5 rx=266 ry=316.5></ellipse></g><defs><filter x=391 y=-24 width=288 height=283 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=391 y=-24 width=288 height=283 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient x1=-664.56 x2=-664.56 y1=163.79 y2=164.79 gradientTransform="matrix(227 0 0 227 151421 -37204)"gradientUnits=userSpaceOnUse><stop stop-color=#FFDF00 offset=0></stop><stop stop-color=#FF9D00 offset=1></stop></linearGradient><circle cx=565.5 cy=89.5 r=113.5></circle><linearGradient x1=-644.5 x2=-645.77 y1=342 y2=342 gradientTransform="matrix(30 0 0 1 19770 -253)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=427 x2=397 y1=89 y2=89 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-641.56 x2=-642.83 y1=196.02 y2=196.07 gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=430.5 x2=404 y1=55.5 y2=50 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-643.73 x2=-645 y1=185.83 y2=185.9 gradientTransform="matrix(29 0 0 8 19107 -1361)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=431 x2=402 y1=122 y2=130 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-638.94 x2=-640.22 y1=177.09 y2=177.39 gradientTransform="matrix(24 0 0 13 15783 -2145)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=442 x2=418 y1=153 y2=166 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-633.42 x2=-634.7 y1=172.41 y2=173.31 gradientTransform="matrix(20 0 0 19 13137 -3096)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=464 x2=444 y1=180 y2=199 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-619.05 x2=-619.52 y1=170.82 y2=171.82 gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=491.4 x2=477.5 y1=203 y2=225.9 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-578.5 x2=-578.63 y1=170.31 y2=171.31 gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=524.5 x2=517 y1=219.5 y2=244 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=666.5 x2=666.5 y1=170.31 y2=171.31 gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=564.5 x2=565 y1=228.5 y2=253 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12>`);
+var _tmpl$17 = /* @__PURE__ */ template(`<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>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<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></path><animateTransform attributeName=transform attributeType=XML type=rotate from=0 to=360 dur=2s repeatCount=indefinite>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<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>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<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>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<svg version=1.0 viewBox="0 0 633 633"><linearGradient 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 stop-color=#F9FFB5 offset=.32></stop><stop stop-color=#FFA770 offset=.71></stop><stop stop-color=#FF7373 offset=1></stop></linearGradient><circle cx=316.5 cy=316.5 r=316.5></circle><defs><filter 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"></feColorMatrix></filter></defs><mask x=-137.5 y=412 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=610.5 rx=214.5 ry=186 fill=#015064 stroke=#00CFE2 stroke-width=25></ellipse></g><defs><filter x=316.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"></feColorMatrix></filter></defs><mask x=316.5 y=412 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=610.5 rx=214.5 ry=186 fill=#015064 stroke=#00CFE2 stroke-width=25></ellipse></g><defs><filter x=-137.5 y=450 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"></feColorMatrix></filter></defs><mask x=-137.5 y=450 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=648.5 rx=214.5 ry=186 fill=#015064 stroke=#00A8B8 stroke-width=25></ellipse></g><defs><filter x=316.5 y=450 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"></feColorMatrix></filter></defs><mask x=316.5 y=450 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=648.5 rx=214.5 ry=186 fill=#015064 stroke=#00A8B8 stroke-width=25></ellipse></g><defs><filter x=-137.5 y=486 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"></feColorMatrix></filter></defs><mask x=-137.5 y=486 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=89.5 cy=684.5 rx=214.5 ry=186 fill=#015064 stroke=#007782 stroke-width=25></ellipse></g><defs><filter x=316.5 y=486 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"></feColorMatrix></filter></defs><mask x=316.5 y=486 width=454 height=396.9 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><ellipse cx=543.5 cy=684.5 rx=214.5 ry=186 fill=#015064 stroke=#007782 stroke-width=25></ellipse></g><defs><filter x=272.2 y=308 width=176.9 height=129.3 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=272.2 y=308 width=176.9 height=129.3 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><line x1=436 x2=431 y1=403.2 y2=431.8 fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11></line><line x1=291 x2=280 y1=341.5 y2=403.5 fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11></line><line x1=332.9 x2=328.6 y1=384.1 y2=411.2 fill=none stroke=#000 stroke-linecap=round stroke-linejoin=bevel stroke-width=11></line><linearGradient x1=-670.75 x2=-671.59 y1=164.4 y2=164.49 gradientTransform="matrix(-184.16 -32.472 -11.461 64.997 -121359 -32126)"gradientUnits=userSpaceOnUse><stop stop-color=#EE2700 offset=0></stop><stop stop-color=#FF008E offset=1></stop></linearGradient><path d="m344.1 363 97.7 17.2c5.8 2.1 8.2 6.1 7.1 12.1s-4.7 9.2-11 9.9l-106-18.7-57.5-59.2c-3.2-4.8-2.9-9.1 0.8-12.8s8.3-4.4 13.7-2.1l55.2 53.6z"clip-rule=evenodd fill-rule=evenodd></path><line x1=428.2 x2=429.1 y1=384.5 y2=378 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=395.2 x2=396.1 y1=379.5 y2=373 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=362.2 x2=363.1 y1=373.5 y2=367.4 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=324.2 x2=328.4 y1=351.3 y2=347.4 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line><line x1=303.2 x2=307.4 y1=331.3 y2=327.4 fill=none stroke=#fff stroke-linecap=round stroke-linejoin=bevel stroke-width=7></line></g><defs><filter x=73.2 y=113.8 width=280.6 height=317.4 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=73.2 y=113.8 width=280.6 height=317.4 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient x1=-672.16 x2=-672.16 y1=165.03 y2=166.03 gradientTransform="matrix(-100.18 48.861 97.976 200.88 -83342 -93.059)"gradientUnits=userSpaceOnUse><stop stop-color=#A17500 offset=0></stop><stop stop-color=#5D2100 offset=1></stop></linearGradient><path d="m192.3 203c8.1 37.3 14 73.6 17.8 109.1 3.8 35.4 2.8 75.1-3 119.2l61.2-16.7c-15.6-59-25.2-97.9-28.6-116.6s-10.8-51.9-22.1-99.6l-25.3 4.6"clip-rule=evenodd fill-rule=evenodd></path><g stroke=#2F8A00><linearGradient x1=-660.23 x2=-660.23 y1=166.72 y2=167.72 gradientTransform="matrix(92.683 4.8573 -2.0259 38.657 61680 -3088.6)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m195 183.9s-12.6-22.1-36.5-29.9c-15.9-5.2-34.4-1.5-55.5 11.1 15.9 14.3 29.5 22.6 40.7 24.9 16.8 3.6 51.3-6.1 51.3-6.1z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-661.36 x2=-661.36 y1=164.18 y2=165.18 gradientTransform="matrix(110 5.7648 -6.3599 121.35 73933 -15933)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5s-47.5-8.5-83.2 15.7c-23.8 16.2-34.3 49.3-31.6 99.4 30.3-27.8 52.1-48.5 65.2-61.9 19.8-20.2 49.6-53.2 49.6-53.2z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-656.79 x2=-656.79 y1=165.15 y2=166.15 gradientTransform="matrix(62.954 3.2993 -3.5023 66.828 42156 -8754.1)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m195 183.9c-0.8-21.9 6-38 20.6-48.2s29.8-15.4 45.5-15.3c-6.1 21.4-14.5 35.8-25.2 43.4s-24.4 14.2-40.9 20.1z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-663.07 x2=-663.07 y1=165.44 y2=166.44 gradientTransform="matrix(152.47 7.9907 -3.0936 59.029 101884 -4318.7)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5c31.9-30 64.1-39.7 96.7-29s50.8 30.4 54.6 59.1c-35.2-5.5-60.4-9.6-75.8-12.1-15.3-2.6-40.5-8.6-75.5-18z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-662.57 x2=-662.57 y1=164.44 y2=165.44 gradientTransform="matrix(136.46 7.1517 -5.2163 99.533 91536 -11442)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5c35.8-7.6 65.6-0.2 89.2 22s37.7 49 42.3 80.3c-39.8-9.7-68.3-23.8-85.5-42.4s-32.5-38.5-46-59.9z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><linearGradient x1=-656.43 x2=-656.43 y1=163.86 y2=164.86 gradientTransform="matrix(60.866 3.1899 -8.7773 167.48 41560 -25168)"gradientUnits=userSpaceOnUse><stop stop-color=#2F8A00 offset=0></stop><stop stop-color=#90FF57 offset=1></stop></linearGradient><path d="m194.9 184.5c-33.6 13.8-53.6 35.7-60.1 65.6s-3.6 63.1 8.7 99.6c27.4-40.3 43.2-69.6 47.4-88s5.6-44.1 4-77.2z"clip-rule=evenodd fill-rule=evenodd stroke-width=13></path><path d="m196.5 182.3c-14.8 21.6-25.1 41.4-30.8 59.4s-9.5 33-11.1 45.1"fill=none stroke-linecap=round stroke-width=8></path><path d="m194.9 185.7c-24.4 1.7-43.8 9-58.1 21.8s-24.7 25.4-31.3 37.8"fill=none stroke-linecap=round stroke-width=8></path><path d="m204.5 176.4c29.7-6.7 52-8.4 67-5.1s26.9 8.6 35.8 15.9"fill=none stroke-linecap=round stroke-width=8></path><path d="m196.5 181.4c20.3 9.9 38.2 20.5 53.9 31.9s27.4 22.1 35.1 32"fill=none stroke-linecap=round stroke-width=8></path></g></g><defs><filter x=50.5 y=399 width=532 height=633 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=50.5 y=399 width=532 height=633 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient x1=-666.06 x2=-666.23 y1=163.36 y2=163.75 gradientTransform="matrix(532 0 0 633 354760 -102959)"gradientUnits=userSpaceOnUse><stop stop-color=#FFF400 offset=0></stop><stop stop-color=#3C8700 offset=1></stop></linearGradient><ellipse cx=316.5 cy=715.5 rx=266 ry=316.5></ellipse></g><defs><filter x=391 y=-24 width=288 height=283 filterUnits=userSpaceOnUse><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"></feColorMatrix></filter></defs><mask x=391 y=-24 width=288 height=283 maskUnits=userSpaceOnUse><g><circle cx=316.5 cy=316.5 r=316.5 fill=#fff></circle></g></mask><g><linearGradient x1=-664.56 x2=-664.56 y1=163.79 y2=164.79 gradientTransform="matrix(227 0 0 227 151421 -37204)"gradientUnits=userSpaceOnUse><stop stop-color=#FFDF00 offset=0></stop><stop stop-color=#FF9D00 offset=1></stop></linearGradient><circle cx=565.5 cy=89.5 r=113.5></circle><linearGradient x1=-644.5 x2=-645.77 y1=342 y2=342 gradientTransform="matrix(30 0 0 1 19770 -253)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=427 x2=397 y1=89 y2=89 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-641.56 x2=-642.83 y1=196.02 y2=196.07 gradientTransform="matrix(26.5 0 0 5.5 17439 -1025.5)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=430.5 x2=404 y1=55.5 y2=50 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-643.73 x2=-645 y1=185.83 y2=185.9 gradientTransform="matrix(29 0 0 8 19107 -1361)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=431 x2=402 y1=122 y2=130 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-638.94 x2=-640.22 y1=177.09 y2=177.39 gradientTransform="matrix(24 0 0 13 15783 -2145)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=442 x2=418 y1=153 y2=166 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-633.42 x2=-634.7 y1=172.41 y2=173.31 gradientTransform="matrix(20 0 0 19 13137 -3096)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=464 x2=444 y1=180 y2=199 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-619.05 x2=-619.52 y1=170.82 y2=171.82 gradientTransform="matrix(13.83 0 0 22.85 9050 -3703.4)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=491.4 x2=477.5 y1=203 y2=225.9 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=-578.5 x2=-578.63 y1=170.31 y2=171.31 gradientTransform="matrix(7.5 0 0 24.5 4860 -3953)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=524.5 x2=517 y1=219.5 y2=244 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12></line><linearGradient x1=666.5 x2=666.5 y1=170.31 y2=171.31 gradientTransform="matrix(.5 0 0 24.5 231.5 -3944)"gradientUnits=userSpaceOnUse><stop stop-color=#FFA400 offset=0></stop><stop stop-color=#FF5E00 offset=1></stop></linearGradient><line x1=564.5 x2=565 y1=228.5 y2=253 fill=none stroke-linecap=round stroke-linejoin=bevel stroke-width=12>`);
 function Search() {
   return _tmpl$();
 }
@@ -9434,89 +9922,101 @@ function Check(props) {
     }
   })];
 }
+function CheckCircle() {
+  return _tmpl$17();
+}
+function LoadingCircle() {
+  return _tmpl$18();
+}
+function XCircle() {
+  return _tmpl$19();
+}
+function PauseCircle() {
+  return _tmpl$20();
+}
 function TanstackLogo() {
   const id = createUniqueId();
   return (() => {
-    const _el$23 = _tmpl$17(), _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$26.firstChild, _el$28 = _el$26.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$28.nextSibling, _el$31 = _el$30.nextSibling, _el$32 = _el$31.firstChild, _el$33 = _el$31.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$33.nextSibling, _el$36 = _el$35.nextSibling, _el$37 = _el$36.firstChild, _el$38 = _el$36.nextSibling, _el$39 = _el$38.firstChild, _el$40 = _el$38.nextSibling, _el$41 = _el$40.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$41.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$43.nextSibling, _el$46 = _el$45.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$46.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$48.nextSibling, _el$51 = _el$50.nextSibling, _el$52 = _el$51.firstChild, _el$53 = _el$51.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$53.nextSibling, _el$56 = _el$55.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$56.nextSibling, _el$59 = _el$58.firstChild, _el$60 = _el$58.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$62.nextSibling, _el$64 = _el$63.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$60.nextSibling, _el$67 = _el$66.firstChild, _el$68 = _el$66.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$68.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$72.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.nextSibling, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$70.nextSibling, _el$87 = _el$86.firstChild, _el$88 = _el$86.nextSibling, _el$89 = _el$88.firstChild, _el$90 = _el$88.nextSibling, _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling, _el$93 = _el$90.nextSibling, _el$94 = _el$93.firstChild, _el$95 = _el$93.nextSibling, _el$96 = _el$95.firstChild, _el$97 = _el$95.nextSibling, _el$98 = _el$97.firstChild, _el$99 = _el$98.nextSibling, _el$100 = _el$99.nextSibling, _el$101 = _el$100.nextSibling, _el$102 = _el$101.nextSibling, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling, _el$106 = _el$105.nextSibling, _el$107 = _el$106.nextSibling, _el$108 = _el$107.nextSibling, _el$109 = _el$108.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$110.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling;
-    setAttribute(_el$24, "id", `a-${id}`);
-    setAttribute(_el$25, "fill", `url(#a-${id})`);
-    setAttribute(_el$27, "id", `am-${id}`);
-    setAttribute(_el$28, "id", `b-${id}`);
-    setAttribute(_el$29, "filter", `url(#am-${id})`);
-    setAttribute(_el$30, "mask", `url(#b-${id})`);
-    setAttribute(_el$32, "id", `ah-${id}`);
-    setAttribute(_el$33, "id", `k-${id}`);
-    setAttribute(_el$34, "filter", `url(#ah-${id})`);
-    setAttribute(_el$35, "mask", `url(#k-${id})`);
-    setAttribute(_el$37, "id", `ae-${id}`);
-    setAttribute(_el$38, "id", `j-${id}`);
-    setAttribute(_el$39, "filter", `url(#ae-${id})`);
-    setAttribute(_el$40, "mask", `url(#j-${id})`);
-    setAttribute(_el$42, "id", `ai-${id}`);
-    setAttribute(_el$43, "id", `i-${id}`);
-    setAttribute(_el$44, "filter", `url(#ai-${id})`);
-    setAttribute(_el$45, "mask", `url(#i-${id})`);
-    setAttribute(_el$47, "id", `aj-${id}`);
-    setAttribute(_el$48, "id", `h-${id}`);
-    setAttribute(_el$49, "filter", `url(#aj-${id})`);
-    setAttribute(_el$50, "mask", `url(#h-${id})`);
-    setAttribute(_el$52, "id", `ag-${id}`);
-    setAttribute(_el$53, "id", `g-${id}`);
-    setAttribute(_el$54, "filter", `url(#ag-${id})`);
-    setAttribute(_el$55, "mask", `url(#g-${id})`);
-    setAttribute(_el$57, "id", `af-${id}`);
-    setAttribute(_el$58, "id", `f-${id}`);
-    setAttribute(_el$59, "filter", `url(#af-${id})`);
-    setAttribute(_el$60, "mask", `url(#f-${id})`);
-    setAttribute(_el$64, "id", `m-${id}`);
-    setAttribute(_el$65, "fill", `url(#m-${id})`);
-    setAttribute(_el$67, "id", `ak-${id}`);
-    setAttribute(_el$68, "id", `e-${id}`);
-    setAttribute(_el$69, "filter", `url(#ak-${id})`);
-    setAttribute(_el$70, "mask", `url(#e-${id})`);
-    setAttribute(_el$71, "id", `n-${id}`);
-    setAttribute(_el$72, "fill", `url(#n-${id})`);
-    setAttribute(_el$74, "id", `r-${id}`);
-    setAttribute(_el$75, "fill", `url(#r-${id})`);
-    setAttribute(_el$76, "id", `s-${id}`);
-    setAttribute(_el$77, "fill", `url(#s-${id})`);
-    setAttribute(_el$78, "id", `q-${id}`);
-    setAttribute(_el$79, "fill", `url(#q-${id})`);
-    setAttribute(_el$80, "id", `p-${id}`);
-    setAttribute(_el$81, "fill", `url(#p-${id})`);
-    setAttribute(_el$82, "id", `o-${id}`);
-    setAttribute(_el$83, "fill", `url(#o-${id})`);
-    setAttribute(_el$84, "id", `l-${id}`);
-    setAttribute(_el$85, "fill", `url(#l-${id})`);
-    setAttribute(_el$87, "id", `al-${id}`);
-    setAttribute(_el$88, "id", `d-${id}`);
-    setAttribute(_el$89, "filter", `url(#al-${id})`);
-    setAttribute(_el$90, "mask", `url(#d-${id})`);
-    setAttribute(_el$91, "id", `u-${id}`);
-    setAttribute(_el$92, "fill", `url(#u-${id})`);
-    setAttribute(_el$94, "id", `ad-${id}`);
-    setAttribute(_el$95, "id", `c-${id}`);
-    setAttribute(_el$96, "filter", `url(#ad-${id})`);
-    setAttribute(_el$97, "mask", `url(#c-${id})`);
-    setAttribute(_el$98, "id", `t-${id}`);
-    setAttribute(_el$99, "fill", `url(#t-${id})`);
-    setAttribute(_el$100, "id", `v-${id}`);
-    setAttribute(_el$101, "stroke", `url(#v-${id})`);
-    setAttribute(_el$102, "id", `aa-${id}`);
-    setAttribute(_el$103, "stroke", `url(#aa-${id})`);
-    setAttribute(_el$104, "id", `w-${id}`);
-    setAttribute(_el$105, "stroke", `url(#w-${id})`);
-    setAttribute(_el$106, "id", `ac-${id}`);
-    setAttribute(_el$107, "stroke", `url(#ac-${id})`);
-    setAttribute(_el$108, "id", `ab-${id}`);
-    setAttribute(_el$109, "stroke", `url(#ab-${id})`);
-    setAttribute(_el$110, "id", `y-${id}`);
-    setAttribute(_el$111, "stroke", `url(#y-${id})`);
-    setAttribute(_el$112, "id", `x-${id}`);
-    setAttribute(_el$113, "stroke", `url(#x-${id})`);
-    setAttribute(_el$114, "id", `z-${id}`);
-    setAttribute(_el$115, "stroke", `url(#z-${id})`);
-    return _el$23;
+    const _el$27 = _tmpl$21(), _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$29.nextSibling, _el$31 = _el$30.firstChild, _el$32 = _el$30.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$35 = _el$34.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$37.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$40.nextSibling, _el$43 = _el$42.firstChild, _el$44 = _el$42.nextSibling, _el$45 = _el$44.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$45.nextSibling, _el$48 = _el$47.firstChild, _el$49 = _el$47.nextSibling, _el$50 = _el$49.nextSibling, _el$51 = _el$50.firstChild, _el$52 = _el$50.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$52.nextSibling, _el$55 = _el$54.nextSibling, _el$56 = _el$55.firstChild, _el$57 = _el$55.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling, _el$60 = _el$59.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$60.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$62.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.nextSibling, _el$67 = _el$66.nextSibling, _el$68 = _el$67.nextSibling, _el$69 = _el$68.nextSibling, _el$70 = _el$64.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$70.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$72.nextSibling, _el$75 = _el$74.firstChild, _el$76 = _el$75.nextSibling, _el$77 = _el$76.nextSibling, _el$78 = _el$77.firstChild, _el$79 = _el$78.nextSibling, _el$80 = _el$79.nextSibling, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling, _el$83 = _el$82.nextSibling, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling, _el$88 = _el$87.nextSibling, _el$89 = _el$88.nextSibling, _el$90 = _el$74.nextSibling, _el$91 = _el$90.firstChild, _el$92 = _el$90.nextSibling, _el$93 = _el$92.firstChild, _el$94 = _el$92.nextSibling, _el$95 = _el$94.firstChild, _el$96 = _el$95.nextSibling, _el$97 = _el$94.nextSibling, _el$98 = _el$97.firstChild, _el$99 = _el$97.nextSibling, _el$100 = _el$99.firstChild, _el$101 = _el$99.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling, _el$106 = _el$105.nextSibling, _el$107 = _el$106.nextSibling, _el$108 = _el$107.nextSibling, _el$109 = _el$108.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$110.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling, _el$116 = _el$115.nextSibling, _el$117 = _el$116.nextSibling, _el$118 = _el$117.nextSibling, _el$119 = _el$118.nextSibling;
+    setAttribute(_el$28, "id", `a-${id}`);
+    setAttribute(_el$29, "fill", `url(#a-${id})`);
+    setAttribute(_el$31, "id", `am-${id}`);
+    setAttribute(_el$32, "id", `b-${id}`);
+    setAttribute(_el$33, "filter", `url(#am-${id})`);
+    setAttribute(_el$34, "mask", `url(#b-${id})`);
+    setAttribute(_el$36, "id", `ah-${id}`);
+    setAttribute(_el$37, "id", `k-${id}`);
+    setAttribute(_el$38, "filter", `url(#ah-${id})`);
+    setAttribute(_el$39, "mask", `url(#k-${id})`);
+    setAttribute(_el$41, "id", `ae-${id}`);
+    setAttribute(_el$42, "id", `j-${id}`);
+    setAttribute(_el$43, "filter", `url(#ae-${id})`);
+    setAttribute(_el$44, "mask", `url(#j-${id})`);
+    setAttribute(_el$46, "id", `ai-${id}`);
+    setAttribute(_el$47, "id", `i-${id}`);
+    setAttribute(_el$48, "filter", `url(#ai-${id})`);
+    setAttribute(_el$49, "mask", `url(#i-${id})`);
+    setAttribute(_el$51, "id", `aj-${id}`);
+    setAttribute(_el$52, "id", `h-${id}`);
+    setAttribute(_el$53, "filter", `url(#aj-${id})`);
+    setAttribute(_el$54, "mask", `url(#h-${id})`);
+    setAttribute(_el$56, "id", `ag-${id}`);
+    setAttribute(_el$57, "id", `g-${id}`);
+    setAttribute(_el$58, "filter", `url(#ag-${id})`);
+    setAttribute(_el$59, "mask", `url(#g-${id})`);
+    setAttribute(_el$61, "id", `af-${id}`);
+    setAttribute(_el$62, "id", `f-${id}`);
+    setAttribute(_el$63, "filter", `url(#af-${id})`);
+    setAttribute(_el$64, "mask", `url(#f-${id})`);
+    setAttribute(_el$68, "id", `m-${id}`);
+    setAttribute(_el$69, "fill", `url(#m-${id})`);
+    setAttribute(_el$71, "id", `ak-${id}`);
+    setAttribute(_el$72, "id", `e-${id}`);
+    setAttribute(_el$73, "filter", `url(#ak-${id})`);
+    setAttribute(_el$74, "mask", `url(#e-${id})`);
+    setAttribute(_el$75, "id", `n-${id}`);
+    setAttribute(_el$76, "fill", `url(#n-${id})`);
+    setAttribute(_el$78, "id", `r-${id}`);
+    setAttribute(_el$79, "fill", `url(#r-${id})`);
+    setAttribute(_el$80, "id", `s-${id}`);
+    setAttribute(_el$81, "fill", `url(#s-${id})`);
+    setAttribute(_el$82, "id", `q-${id}`);
+    setAttribute(_el$83, "fill", `url(#q-${id})`);
+    setAttribute(_el$84, "id", `p-${id}`);
+    setAttribute(_el$85, "fill", `url(#p-${id})`);
+    setAttribute(_el$86, "id", `o-${id}`);
+    setAttribute(_el$87, "fill", `url(#o-${id})`);
+    setAttribute(_el$88, "id", `l-${id}`);
+    setAttribute(_el$89, "fill", `url(#l-${id})`);
+    setAttribute(_el$91, "id", `al-${id}`);
+    setAttribute(_el$92, "id", `d-${id}`);
+    setAttribute(_el$93, "filter", `url(#al-${id})`);
+    setAttribute(_el$94, "mask", `url(#d-${id})`);
+    setAttribute(_el$95, "id", `u-${id}`);
+    setAttribute(_el$96, "fill", `url(#u-${id})`);
+    setAttribute(_el$98, "id", `ad-${id}`);
+    setAttribute(_el$99, "id", `c-${id}`);
+    setAttribute(_el$100, "filter", `url(#ad-${id})`);
+    setAttribute(_el$101, "mask", `url(#c-${id})`);
+    setAttribute(_el$102, "id", `t-${id}`);
+    setAttribute(_el$103, "fill", `url(#t-${id})`);
+    setAttribute(_el$104, "id", `v-${id}`);
+    setAttribute(_el$105, "stroke", `url(#v-${id})`);
+    setAttribute(_el$106, "id", `aa-${id}`);
+    setAttribute(_el$107, "stroke", `url(#aa-${id})`);
+    setAttribute(_el$108, "id", `w-${id}`);
+    setAttribute(_el$109, "stroke", `url(#w-${id})`);
+    setAttribute(_el$110, "id", `ac-${id}`);
+    setAttribute(_el$111, "stroke", `url(#ac-${id})`);
+    setAttribute(_el$112, "id", `ab-${id}`);
+    setAttribute(_el$113, "stroke", `url(#ab-${id})`);
+    setAttribute(_el$114, "id", `y-${id}`);
+    setAttribute(_el$115, "stroke", `url(#y-${id})`);
+    setAttribute(_el$116, "id", `x-${id}`);
+    setAttribute(_el$117, "stroke", `url(#x-${id})`);
+    setAttribute(_el$118, "id", `z-${id}`);
+    setAttribute(_el$119, "stroke", `url(#z-${id})`);
+    return _el$27;
   })();
 }
 
@@ -9538,8 +10038,8 @@ function useTheme() {
 }
 
 // src/Explorer.tsx
-var _tmpl$18 = /* @__PURE__ */ template(`<span><svg width=16 height=16 viewBox="0 0 16 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 12L10 8L6 4"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<span><svg width=16 height=16 viewBox="0 0 16 16"fill=none xmlns=http://www.w3.org/2000/svg><path d="M6 12L10 8L6 4"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
 var _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items"aria-label="Remove all items">`);
 var _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item"aria-label="Delete item">`);
 var _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value"aria-label="Toggle value">`);
@@ -9566,7 +10066,7 @@ var Expander = (props) => {
     return theme() === "dark" ? darkStyles : lightStyles;
   });
   return (() => {
-    const _el$ = _tmpl$18();
+    const _el$ = _tmpl$22();
     createRenderEffect(() => className(_el$, clsx(styles().expander, u`
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `, props.expanded && u`
@@ -9584,7 +10084,7 @@ var CopyButton = (props) => {
   });
   const [copyState, setCopyState] = createSignal("NoCopy");
   return (() => {
-    const _el$2 = _tmpl$22();
+    const _el$2 = _tmpl$23();
     addEventListener(_el$2, "click", copyState() === "NoCopy" ? () => {
       navigator.clipboard.writeText(stringify(props.value)).then(() => {
         setCopyState("SuccessCopy");
@@ -10081,8 +10581,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`
@@ -10090,7 +10590,7 @@ var stylesFactory = (theme) => {
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size2[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -10132,8 +10632,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`
@@ -10186,31 +10686,36 @@ var loadFonts = () => {
 };
 
 // src/Devtools.tsx
-var _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
-var _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
-var _tmpl$53 = /* @__PURE__ */ template(`<div>Settings`);
-var _tmpl$63 = /* @__PURE__ */ template(`<span>Position`);
-var _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
-var _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
-var _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
-var _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
-var _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
-var _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
-var _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
-var _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
-var _tmpl$152 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools"></button><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter class=tsqd-query-filter-textfield></div><div><select></select></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"title="Clear query cache"></button><button></button></div></div><div><div class=tsqd-queries-container>`);
-var _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
-var _tmpl$172 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-var _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-var _tmpl$192 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-var _tmpl$20 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
-var _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
-var _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
-var _tmpl$25 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+var _tmpl$25 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
+var _tmpl$43 = /* @__PURE__ */ template(`<select>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<span>Asc`);
+var _tmpl$63 = /* @__PURE__ */ template(`<span>Desc`);
+var _tmpl$73 = /* @__PURE__ */ template(`<div>Settings`);
+var _tmpl$83 = /* @__PURE__ */ template(`<span>Position`);
+var _tmpl$93 = /* @__PURE__ */ template(`<span>Top`);
+var _tmpl$103 = /* @__PURE__ */ template(`<span>Bottom`);
+var _tmpl$113 = /* @__PURE__ */ template(`<span>Left`);
+var _tmpl$122 = /* @__PURE__ */ template(`<span>Right`);
+var _tmpl$132 = /* @__PURE__ */ template(`<span>Theme`);
+var _tmpl$142 = /* @__PURE__ */ template(`<span>Light`);
+var _tmpl$152 = /* @__PURE__ */ template(`<span>Dark`);
+var _tmpl$162 = /* @__PURE__ */ template(`<span>System`);
+var _tmpl$172 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
+var _tmpl$182 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
+var _tmpl$192 = /* @__PURE__ */ template(`<div><div><div><button aria-label="Close Tanstack query devtools"><span>TANSTACK</span><span> v</span></button></div></div><div><div><div><input aria-label="Filter queries by query key"type=text placeholder=Filter class=tsqd-query-filter-textfield></div><div></div><button class=tsqd-query-filter-sort-order-btn></button></div><div><button aria-label="Clear query cache"></button><button>`);
+var _tmpl$202 = /* @__PURE__ */ template(`<option>Sort by `);
+var _tmpl$212 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+var _tmpl$222 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+var _tmpl$232 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+var _tmpl$242 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$252 = /* @__PURE__ */ template(`<button><span></span><span>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<button><span></span> Error`);
+var _tmpl$27 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer"></div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
+var _tmpl$29 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$30 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
 var firstBreakpoint = 1024;
 var secondBreakpoint = 796;
 var thirdBreakpoint = 700;
@@ -10222,7 +10727,9 @@ 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({
@@ -10266,16 +10773,31 @@ 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();
     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$23();
+    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() {
@@ -10304,7 +10826,7 @@ var Devtools = (props) => {
             return !isOpen();
           },
           get children() {
-            const _el$2 = _tmpl$19(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+            const _el$2 = _tmpl$24(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
             insert(_el$3, createComponent(TanstackLogo, {}));
             _el$4.$$click = () => props.setLocalStore("open", "true");
             insert(_el$4, createComponent(TanstackLogo, {}));
@@ -10344,24 +10866,7 @@ 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)
@@ -10409,8 +10914,6 @@ var DevtoolsPanel = (props) => {
     document.addEventListener("mousemove", runDrag, false);
     document.addEventListener("mouseup", unsub, false);
   };
-  setupQueryCacheSubscription();
-  let queriesContainerRef;
   let panelRef;
   onMount(() => {
     createResizeObserver(panelRef, ({
@@ -10421,9 +10924,6 @@ var DevtoolsPanel = (props) => {
       }
     });
   });
-  const setDevtoolsPosition = (pos) => {
-    props.setLocalStore("position", pos);
-  };
   createEffect(() => {
     const rootContainer = panelRef.parentElement?.parentElement?.parentElement;
     if (!rootContainer)
@@ -10468,52 +10968,238 @@ var DevtoolsPanel = (props) => {
     `;
   };
   return (() => {
-    const _el$5 = _tmpl$152(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$9.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$23 = _el$15.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$36 = _el$14.nextSibling, _el$37 = _el$36.firstChild;
-    const _ref$ = panelRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$5) : panelRef = _el$5;
+    const _el$5 = _tmpl$33(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+    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, {}));
-    const _ref$2 = queriesContainerRef;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$8) : queriesContainerRef = _el$8;
-    _el$10.$$click = () => props.setLocalStore("open", "false");
-    insert(_el$12, () => useQueryDevtoolsContext().queryFlavor, _el$13);
-    insert(_el$12, () => useQueryDevtoolsContext().version, null);
-    insert(_el$9, createComponent(QueryStatusCount, {}), null);
-    insert(_el$16, createComponent(Search, {}), _el$17);
-    _el$17.$$input = (e2) => props.setLocalStore("filter", e2.currentTarget.value);
-    _el$19.addEventListener("change", (e2) => props.setLocalStore("sort", e2.currentTarget.value));
-    insert(_el$19, () => Object.keys(sortFns).map((key) => (() => {
-      const _el$38 = _tmpl$162(); _el$38.firstChild;
-      _el$38.value = key;
-      insert(_el$38, key, null);
-      return _el$38;
-    })()));
-    insert(_el$18, createComponent(ChevronDown, {}), null);
-    _el$20.$$click = () => {
-      props.setLocalStore("sortOrder", String(sortOrder() * -1));
-    };
-    insert(_el$20, createComponent(Show, {
-      get when() {
-        return sortOrder() === 1;
+    insert(_el$5, createComponent(ContentView, {
+      get localStore() {
+        return props.localStore;
+      },
+      get setLocalStore() {
+        return props.setLocalStore;
+      }
+    }), null);
+    createRenderEffect((_p$) => {
+      const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
+        [u`
+            min-width: min-content;
+          `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
+      }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn");
+      _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
+      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
+      _v$4 !== _p$._v$4 && className(_el$6, _p$._v$4 = _v$4);
+      _v$5 !== _p$._v$5 && className(_el$7, _p$._v$5 = _v$5);
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0,
+      _v$4: void 0,
+      _v$5: void 0
+    });
+    return _el$5;
+  })();
+};
+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 [(() => {
+    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);
+    insert(_el$10, createComponent(index$7.Root, {
+      get ["class"]() {
+        return clsx(styles().viewToggle);
+      },
+      get value() {
+        return selectedView();
+      },
+      onChange: (value) => {
+        setSelectedView(value);
+        setSelectedQueryHash(null);
+        setSelectedMutationId(null);
+      },
+      get children() {
+        return [createComponent(index$7.Item, {
+          value: "queries",
+          "class": "tsqd-radio-toggle",
+          get children() {
+            return [createComponent(index$7.ItemInput, {}), createComponent(index$7.ItemControl, {
+              get children() {
+                return createComponent(index$7.ItemIndicator, {});
+              }
+            }), createComponent(index$7.ItemLabel, {
+              title: "Toggle Queries View",
+              children: "Queries"
+            })];
+          }
+        }), createComponent(index$7.Item, {
+          value: "mutations",
+          "class": "tsqd-radio-toggle",
+          get children() {
+            return [createComponent(index$7.ItemInput, {}), createComponent(index$7.ItemControl, {
+              get children() {
+                return createComponent(index$7.ItemIndicator, {});
+              }
+            }), createComponent(index$7.ItemLabel, {
+              title: "Toggle Mutations View",
+              children: "Mutations"
+            })];
+          }
+        })];
+      }
+    }), null);
+    insert(_el$9, createComponent(Show, {
+      get when() {
+        return selectedView() === "queries";
+      },
+      get children() {
+        return createComponent(QueryStatusCount, {});
+      }
+    }), null);
+    insert(_el$9, createComponent(Show, {
+      get when() {
+        return selectedView() === "mutations";
+      },
+      get children() {
+        return createComponent(MutationStatusCount, {});
+      }
+    }), null);
+    insert(_el$17, createComponent(Search, {}), _el$18);
+    _el$18.$$input = (e2) => {
+      if (selectedView() === "queries") {
+        props.setLocalStore("filter", e2.currentTarget.value);
+      } else {
+        props.setLocalStore("mutationFilter", e2.currentTarget.value);
+      }
+    };
+    insert(_el$19, createComponent(Show, {
+      get when() {
+        return selectedView() === "queries";
       },
       get children() {
-        return [_tmpl$33(), createComponent(ArrowUp, {})];
+        const _el$20 = _tmpl$43();
+        _el$20.addEventListener("change", (e2) => {
+          props.setLocalStore("sort", e2.currentTarget.value);
+        });
+        insert(_el$20, () => Object.keys(sortFns).map((key) => (() => {
+          const _el$42 = _tmpl$202(); _el$42.firstChild;
+          _el$42.value = key;
+          insert(_el$42, key, null);
+          return _el$42;
+        })()));
+        createRenderEffect(() => _el$20.value = sort());
+        return _el$20;
       }
     }), null);
-    insert(_el$20, createComponent(Show, {
+    insert(_el$19, createComponent(Show, {
       get when() {
-        return sortOrder() === -1;
+        return selectedView() === "mutations";
       },
       get children() {
-        return [_tmpl$43(), createComponent(ArrowDown, {})];
+        const _el$21 = _tmpl$43();
+        _el$21.addEventListener("change", (e2) => {
+          props.setLocalStore("mutationSort", e2.currentTarget.value);
+        });
+        insert(_el$21, () => Object.keys(mutationSortFns).map((key) => (() => {
+          const _el$44 = _tmpl$202(); _el$44.firstChild;
+          _el$44.value = key;
+          insert(_el$44, key, null);
+          return _el$44;
+        })()));
+        createRenderEffect(() => _el$21.value = mutationSort());
+        return _el$21;
       }
     }), null);
-    _el$24.$$click = () => {
-      cache().clear();
+    insert(_el$19, createComponent(ChevronDown, {}), null);
+    _el$22.$$click = () => {
+      if (selectedView() === "queries") {
+        props.setLocalStore("sortOrder", String(sortOrder() * -1));
+      } else {
+        props.setLocalStore("mutationSortOrder", String(mutationSortOrder() * -1));
+      }
     };
-    insert(_el$24, createComponent(Trash, {}));
-    _el$25.$$click = () => {
+    insert(_el$22, createComponent(Show, {
+      get when() {
+        return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === 1;
+      },
+      get children() {
+        return [_tmpl$53(), createComponent(ArrowUp, {})];
+      }
+    }), null);
+    insert(_el$22, createComponent(Show, {
+      get when() {
+        return (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1;
+      },
+      get children() {
+        return [_tmpl$63(), createComponent(ArrowDown, {})];
+      }
+    }), null);
+    _el$26.$$click = () => {
+      if (selectedView() === "queries") {
+        query_cache().clear();
+      } else {
+        mutation_cache().clear();
+      }
+    };
+    insert(_el$26, createComponent(Trash, {}));
+    _el$27.$$click = () => {
       if (offline()) {
         onlineManager().setOnline(true);
         setOffline(false);
@@ -10522,11 +11208,11 @@ var DevtoolsPanel = (props) => {
         setOffline(true);
       }
     };
-    insert(_el$25, (() => {
+    insert(_el$27, (() => {
       const _c$ = createMemo(() => !!offline());
       return () => _c$() ? createComponent(Offline, {}) : createComponent(Wifi, {});
     })());
-    insert(_el$23, createComponent(index$d.Root, {
+    insert(_el$25, createComponent(index$d.Root, {
       gutter: 4,
       get children() {
         return [createComponent(index$d.Trigger, {
@@ -10537,6 +11223,7 @@ var DevtoolsPanel = (props) => {
             return createComponent(Settings, {});
           }
         }), createComponent(index$d.Portal, {
+          ref: (el) => setComputedVariables(el),
           get children() {
             return createComponent(index$d.Content, {
               get ["class"]() {
@@ -10544,9 +11231,9 @@ var DevtoolsPanel = (props) => {
               },
               get children() {
                 return [(() => {
-                  const _el$26 = _tmpl$53();
-                  createRenderEffect(() => className(_el$26, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
-                  return _el$26;
+                  const _el$28 = _tmpl$73();
+                  createRenderEffect(() => className(_el$28, clsx(styles().settingsMenuHeader, "tsqd-settings-menu-header")));
+                  return _el$28;
                 })(), createComponent(index$d.Sub, {
                   overlap: true,
                   gutter: 8,
@@ -10557,9 +11244,10 @@ var DevtoolsPanel = (props) => {
                         return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
                       },
                       get children() {
-                        return [_tmpl$63(), createComponent(ChevronDown, {})];
+                        return [_tmpl$83(), createComponent(ChevronDown, {})];
                       }
                     }), createComponent(index$d.Portal, {
+                      ref: (el) => setComputedVariables(el),
                       get children() {
                         return createComponent(index$d.SubContent, {
                           get ["class"]() {
@@ -10575,7 +11263,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
                               },
                               get children() {
-                                return [_tmpl$73(), createComponent(ArrowUp, {})];
+                                return [_tmpl$93(), createComponent(ArrowUp, {})];
                               }
                             }), createComponent(index$d.Item, {
                               onSelect: () => {
@@ -10586,7 +11274,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
                               },
                               get children() {
-                                return [_tmpl$83(), createComponent(ArrowDown, {})];
+                                return [_tmpl$103(), createComponent(ArrowDown, {})];
                               }
                             }), createComponent(index$d.Item, {
                               onSelect: () => {
@@ -10597,7 +11285,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
                               },
                               get children() {
-                                return [_tmpl$93(), createComponent(ArrowLeft, {})];
+                                return [_tmpl$113(), createComponent(ArrowLeft, {})];
                               }
                             }), createComponent(index$d.Item, {
                               onSelect: () => {
@@ -10608,7 +11296,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
                               },
                               get children() {
-                                return [_tmpl$103(), createComponent(ArrowRight, {})];
+                                return [_tmpl$122(), createComponent(ArrowRight, {})];
                               }
                             })];
                           }
@@ -10626,9 +11314,10 @@ var DevtoolsPanel = (props) => {
                         return clsx(styles().settingsSubTrigger, "tsqd-settings-menu-sub-trigger", "tsqd-settings-menu-sub-trigger-position");
                       },
                       get children() {
-                        return [_tmpl$113(), createComponent(ChevronDown, {})];
+                        return [_tmpl$132(), createComponent(ChevronDown, {})];
                       }
                     }), createComponent(index$d.Portal, {
+                      ref: (el) => setComputedVariables(el),
                       get children() {
                         return createComponent(index$d.SubContent, {
                           get ["class"]() {
@@ -10644,7 +11333,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
                               },
                               get children() {
-                                return [_tmpl$122(), createComponent(Sun, {})];
+                                return [_tmpl$142(), createComponent(Sun, {})];
                               }
                             }), createComponent(index$d.Item, {
                               onSelect: () => {
@@ -10655,7 +11344,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
                               },
                               get children() {
-                                return [_tmpl$132(), createComponent(Moon, {})];
+                                return [_tmpl$152(), createComponent(Moon, {})];
                               }
                             }), createComponent(index$d.Item, {
                               onSelect: () => {
@@ -10666,7 +11355,7 @@ var DevtoolsPanel = (props) => {
                                 return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
                               },
                               get children() {
-                                return [_tmpl$142(), createComponent(Monitor, {})];
+                                return [_tmpl$162(), createComponent(Monitor, {})];
                               }
                             })];
                           }
@@ -10681,66 +11370,74 @@ var DevtoolsPanel = (props) => {
         })];
       }
     }), null);
-    insert(_el$37, createComponent(Key, {
-      by: (q) => q.queryHash,
-      get each() {
-        return queries();
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return selectedView() === "queries";
       },
-      children: (query) => createComponent(QueryRow, {
-        get query() {
-          return query();
-        }
-      })
-    }));
-    insert(_el$5, createComponent(Show, {
+      get children() {
+        const _el$38 = _tmpl$172(), _el$39 = _el$38.firstChild;
+        insert(_el$39, createComponent(Key, {
+          by: (q) => q.queryHash,
+          get each() {
+            return queries();
+          },
+          children: (query) => createComponent(QueryRow, {
+            get query() {
+              return query();
+            }
+          })
+        }));
+        createRenderEffect(() => className(_el$38, clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container")));
+        return _el$38;
+      }
+    }), null);
+    insert(_el$8, createComponent(Show, {
       get when() {
-        return selectedQueryHash();
+        return selectedView() === "mutations";
       },
       get children() {
-        return createComponent(QueryDetails, {});
+        const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild;
+        insert(_el$41, createComponent(Key, {
+          by: (m) => m.mutationId,
+          get each() {
+            return mutations();
+          },
+          children: (mutation) => createComponent(MutationRow, {
+            get mutation() {
+              return mutation();
+            }
+          })
+        }));
+        createRenderEffect(() => className(_el$40, clsx(styles().overflowQueryContainer, "tsqd-mutations-overflow-container")));
+        return _el$40;
       }
     }), null);
     createRenderEffect((_p$) => {
-      const _v$ = clsx(styles().panel, styles()[`panel-position-${position()}`], getPanelDynamicStyles(), {
-        [u`
-            min-width: min-content;
-          `]: panelWidth() < thirdBreakpoint && (position() === "right" || position() === "left")
-      }, "tsqd-main-panel"), _v$2 = position() === "bottom" || position() === "top" ? `${props.localStore.height || DEFAULT_HEIGHT}px` : "auto", _v$3 = position() === "right" || position() === "left" ? `${props.localStore.width || DEFAULT_WIDTH}px` : "auto", _v$4 = clsx(styles().dragHandle, styles()[`dragHandle-position-${position()}`], "tsqd-drag-handle"), _v$5 = clsx(styles().closeBtn, styles()[`closeBtn-position-${position()}`], "tsqd-minimize-btn"), _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && selectedQueryHash() && u`
+      const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
-            `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = clsx(styles().logo, "tsqd-text-logo-container"), _v$9 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$10 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$11 = clsx(styles().row, u`
-              gap: ${tokens.size[2.5]};
-            `, "tsqd-filters-actions-container"), _v$12 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$13 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$14 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$15 = `Sort order ${sortOrder() === -1 ? "descending" : "ascending"}`, _v$16 = sortOrder() === -1, _v$17 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$18 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$19 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$20 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$21 = offline(), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = clsx(styles().overflowQueryContainer, "tsqd-queries-overflow-container");
-      _v$ !== _p$._v$ && className(_el$5, _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$5.style.setProperty("height", _v$2) : _el$5.style.removeProperty("height"));
-      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$5.style.setProperty("width", _v$3) : _el$5.style.removeProperty("width"));
-      _v$4 !== _p$._v$4 && className(_el$6, _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && className(_el$7, _p$._v$5 = _v$5);
+            `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
       _v$8 !== _p$._v$8 && className(_el$10, _p$._v$8 = _v$8);
       _v$9 !== _p$._v$9 && className(_el$11, _p$._v$9 = _v$9);
       _v$10 !== _p$._v$10 && className(_el$12, _p$._v$10 = _v$10);
-      _v$11 !== _p$._v$11 && className(_el$14, _p$._v$11 = _v$11);
+      _v$11 !== _p$._v$11 && className(_el$13, _p$._v$11 = _v$11);
       _v$12 !== _p$._v$12 && className(_el$15, _p$._v$12 = _v$12);
       _v$13 !== _p$._v$13 && className(_el$16, _p$._v$13 = _v$13);
-      _v$14 !== _p$._v$14 && className(_el$18, _p$._v$14 = _v$14);
-      _v$15 !== _p$._v$15 && setAttribute(_el$20, "aria-label", _p$._v$15 = _v$15);
-      _v$16 !== _p$._v$16 && setAttribute(_el$20, "aria-pressed", _p$._v$16 = _v$16);
-      _v$17 !== _p$._v$17 && className(_el$23, _p$._v$17 = _v$17);
-      _v$18 !== _p$._v$18 && className(_el$24, _p$._v$18 = _v$18);
-      _v$19 !== _p$._v$19 && className(_el$25, _p$._v$19 = _v$19);
-      _v$20 !== _p$._v$20 && setAttribute(_el$25, "aria-label", _p$._v$20 = _v$20);
-      _v$21 !== _p$._v$21 && setAttribute(_el$25, "aria-pressed", _p$._v$21 = _v$21);
-      _v$22 !== _p$._v$22 && setAttribute(_el$25, "title", _p$._v$22 = _v$22);
-      _v$23 !== _p$._v$23 && className(_el$36, _p$._v$23 = _v$23);
+      _v$14 !== _p$._v$14 && className(_el$17, _p$._v$14 = _v$14);
+      _v$15 !== _p$._v$15 && className(_el$19, _p$._v$15 = _v$15);
+      _v$16 !== _p$._v$16 && setAttribute(_el$22, "aria-label", _p$._v$16 = _v$16);
+      _v$17 !== _p$._v$17 && setAttribute(_el$22, "aria-pressed", _p$._v$17 = _v$17);
+      _v$18 !== _p$._v$18 && className(_el$25, _p$._v$18 = _v$18);
+      _v$19 !== _p$._v$19 && className(_el$26, _p$._v$19 = _v$19);
+      _v$20 !== _p$._v$20 && setAttribute(_el$26, "title", _p$._v$20 = _v$20);
+      _v$21 !== _p$._v$21 && className(_el$27, _p$._v$21 = _v$21);
+      _v$22 !== _p$._v$22 && setAttribute(_el$27, "aria-label", _p$._v$22 = _v$22);
+      _v$23 !== _p$._v$23 && setAttribute(_el$27, "aria-pressed", _p$._v$23 = _v$23);
+      _v$24 !== _p$._v$24 && setAttribute(_el$27, "title", _p$._v$24 = _v$24);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0,
       _v$6: void 0,
       _v$7: void 0,
       _v$8: void 0,
@@ -10758,12 +11455,26 @@ var DevtoolsPanel = (props) => {
       _v$20: void 0,
       _v$21: void 0,
       _v$22: void 0,
-      _v$23: void 0
+      _v$23: void 0,
+      _v$24: void 0
     });
-    createRenderEffect(() => _el$17.value = props.localStore.filter || "");
-    createRenderEffect(() => _el$19.value = sort());
-    return _el$5;
-  })();
+    createRenderEffect(() => _el$18.value = selectedView() === "queries" ? props.localStore.filter || "" : props.localStore.mutationFilter || "");
+    return _el$8;
+  })(), createComponent(Show, {
+    get when() {
+      return createMemo(() => selectedView() === "queries")() && selectedQueryHash();
+    },
+    get children() {
+      return createComponent(QueryDetails, {});
+    }
+  }), createComponent(Show, {
+    get when() {
+      return createMemo(() => selectedView() === "mutations")() && selectedMutationId();
+    },
+    get children() {
+      return createComponent(MutationDetails, {});
+    }
+  })];
 };
 var QueryRow = (props) => {
   const theme = useTheme();
@@ -10809,30 +11520,140 @@ var QueryRow = (props) => {
       return queryState();
     },
     get children() {
-      const _el$40 = _tmpl$182(), _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
-      _el$40.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
-      insert(_el$41, observers);
-      insert(_el$42, () => props.query.queryHash);
-      insert(_el$40, createComponent(Show, {
+      const _el$46 = _tmpl$222(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
+      _el$46.$$click = () => setSelectedQueryHash(props.query.queryHash === selectedQueryHash() ? null : props.query.queryHash);
+      insert(_el$47, observers);
+      insert(_el$48, () => props.query.queryHash);
+      insert(_el$46, createComponent(Show, {
         get when() {
           return isDisabled();
         },
         get children() {
-          return _tmpl$172();
+          return _tmpl$212();
         }
       }), null);
       createRenderEffect((_p$) => {
-        const _v$24 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$25 = `Query key ${props.query.queryHash}`, _v$26 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
-        _v$24 !== _p$._v$24 && className(_el$40, _p$._v$24 = _v$24);
-        _v$25 !== _p$._v$25 && setAttribute(_el$40, "aria-label", _p$._v$25 = _v$25);
-        _v$26 !== _p$._v$26 && className(_el$41, _p$._v$26 = _v$26);
+        const _v$25 = clsx(styles().queryRow, selectedQueryHash() === props.query.queryHash && styles().selectedQueryRow, "tsqd-query-row"), _v$26 = `Query key ${props.query.queryHash}`, _v$27 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
+        _v$25 !== _p$._v$25 && className(_el$46, _p$._v$25 = _v$25);
+        _v$26 !== _p$._v$26 && setAttribute(_el$46, "aria-label", _p$._v$26 = _v$26);
+        _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
         return _p$;
       }, {
-        _v$24: void 0,
         _v$25: void 0,
-        _v$26: void 0
+        _v$26: void 0,
+        _v$27: void 0
       });
-      return _el$40;
+      return _el$46;
+    }
+  });
+};
+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 createComponent(Show, {
+    get when() {
+      return mutationState();
+    },
+    get children() {
+      const _el$50 = _tmpl$222(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
+      _el$50.$$click = () => {
+        setSelectedMutationId(props.mutation.mutationId === selectedMutationId() ? null : props.mutation.mutationId);
+      };
+      insert(_el$51, createComponent(Show, {
+        get when() {
+          return color() === "purple";
+        },
+        get children() {
+          return createComponent(PauseCircle, {});
+        }
+      }), null);
+      insert(_el$51, createComponent(Show, {
+        get when() {
+          return color() === "green";
+        },
+        get children() {
+          return createComponent(CheckCircle, {});
+        }
+      }), null);
+      insert(_el$51, createComponent(Show, {
+        get when() {
+          return color() === "red";
+        },
+        get children() {
+          return createComponent(XCircle, {});
+        }
+      }), null);
+      insert(_el$51, createComponent(Show, {
+        get when() {
+          return color() === "yellow";
+        },
+        get children() {
+          return createComponent(LoadingCircle, {});
+        }
+      }), null);
+      insert(_el$52, createComponent(Show, {
+        get when() {
+          return props.mutation.options.mutationKey;
+        },
+        get children() {
+          return [createMemo(() => JSON.stringify(props.mutation.options.mutationKey)), " -", " "];
+        }
+      }), null);
+      insert(_el$52, () => new Date(props.mutation.state.submittedAt).toLocaleString(), null);
+      createRenderEffect((_p$) => {
+        const _v$28 = clsx(styles().queryRow, selectedMutationId() === props.mutation.mutationId && styles().selectedQueryRow, "tsqd-query-row"), _v$29 = `Mutation submitted at ${new Date(props.mutation.state.submittedAt).toLocaleString()}`, _v$30 = clsx(getObserverCountColorStyles(), "tsqd-query-observer-count");
+        _v$28 !== _p$._v$28 && className(_el$50, _p$._v$28 = _v$28);
+        _v$29 !== _p$._v$29 && setAttribute(_el$50, "aria-label", _p$._v$29 = _v$29);
+        _v$30 !== _p$._v$30 && className(_el$51, _p$._v$30 = _v$30);
+        return _p$;
+      }, {
+        _v$28: void 0,
+        _v$29: void 0,
+        _v$30: void 0
+      });
+      return _el$50;
     }
   });
 };
@@ -10847,44 +11668,99 @@ var QueryStatusCount = () => {
     return theme() === "dark" ? darkStyles2 : lightStyles2;
   });
   return (() => {
-    const _el$44 = _tmpl$23();
-    insert(_el$44, createComponent(QueryStatus, {
+    const _el$53 = _tmpl$25();
+    insert(_el$53, createComponent(QueryStatus, {
       label: "Fresh",
       color: "green",
       get count() {
         return fresh();
       }
     }), null);
-    insert(_el$44, createComponent(QueryStatus, {
+    insert(_el$53, createComponent(QueryStatus, {
       label: "Fetching",
       color: "blue",
       get count() {
         return fetching();
       }
     }), null);
-    insert(_el$44, createComponent(QueryStatus, {
+    insert(_el$53, createComponent(QueryStatus, {
       label: "Paused",
       color: "purple",
       get count() {
         return paused();
       }
     }), null);
-    insert(_el$44, createComponent(QueryStatus, {
+    insert(_el$53, createComponent(QueryStatus, {
       label: "Stale",
       color: "yellow",
       get count() {
         return stale();
       }
     }), null);
-    insert(_el$44, createComponent(QueryStatus, {
+    insert(_el$53, createComponent(QueryStatus, {
       label: "Inactive",
       color: "gray",
       get count() {
         return inactive();
       }
     }), null);
-    createRenderEffect(() => className(_el$44, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
-    return _el$44;
+    createRenderEffect(() => className(_el$53, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$53;
+  })();
+};
+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 (() => {
+    const _el$54 = _tmpl$25();
+    insert(_el$54, createComponent(QueryStatus, {
+      label: "Paused",
+      color: "purple",
+      get count() {
+        return paused();
+      }
+    }), null);
+    insert(_el$54, createComponent(QueryStatus, {
+      label: "Pending",
+      color: "yellow",
+      get count() {
+        return pending();
+      }
+    }), null);
+    insert(_el$54, createComponent(QueryStatus, {
+      label: "Success",
+      color: "green",
+      get count() {
+        return success();
+      }
+    }), null);
+    insert(_el$54, createComponent(QueryStatus, {
+      label: "Error",
+      color: "red",
+      get count() {
+        return error();
+      }
+    }), null);
+    createRenderEffect(() => className(_el$54, clsx(styles().queryStatusContainer, "tsqd-query-status-container")));
+    return _el$54;
   })();
 };
 var QueryStatus = (props) => {
@@ -10912,17 +11788,17 @@ var QueryStatus = (props) => {
     return true;
   });
   return (() => {
-    const _el$45 = _tmpl$21(), _el$47 = _el$45.firstChild, _el$49 = _el$47.nextSibling;
-    const _ref$3 = tagRef;
-    typeof _ref$3 === "function" ? use(_ref$3, _el$45) : tagRef = _el$45;
-    _el$45.addEventListener("mouseleave", () => {
+    const _el$55 = _tmpl$252(), _el$57 = _el$55.firstChild, _el$59 = _el$57.nextSibling;
+    const _ref$4 = tagRef;
+    typeof _ref$4 === "function" ? use(_ref$4, _el$55) : tagRef = _el$55;
+    _el$55.addEventListener("mouseleave", () => {
       setMouseOver(false);
       setFocused(false);
     });
-    _el$45.addEventListener("mouseenter", () => setMouseOver(true));
-    _el$45.addEventListener("blur", () => setFocused(false));
-    _el$45.addEventListener("focus", () => setFocused(true));
-    spread(_el$45, mergeProps({
+    _el$55.addEventListener("mouseenter", () => setMouseOver(true));
+    _el$55.addEventListener("blur", () => setFocused(false));
+    _el$55.addEventListener("focus", () => setFocused(true));
+    spread(_el$55, mergeProps({
       get disabled() {
         return showLabel();
       },
@@ -10937,47 +11813,47 @@ var QueryStatus = (props) => {
     }, () => mouseOver() || focused() ? {
       "aria-describedby": "tsqd-status-tooltip"
     } : {}), false, true);
-    insert(_el$45, createComponent(Show, {
+    insert(_el$55, createComponent(Show, {
       get when() {
         return createMemo(() => !!!showLabel())() && (mouseOver() || focused());
       },
       get children() {
-        const _el$46 = _tmpl$192();
-        insert(_el$46, () => props.label);
-        createRenderEffect(() => className(_el$46, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
-        return _el$46;
+        const _el$56 = _tmpl$232();
+        insert(_el$56, () => props.label);
+        createRenderEffect(() => className(_el$56, clsx(styles().statusTooltip, "tsqd-query-status-tooltip")));
+        return _el$56;
       }
-    }), _el$47);
-    insert(_el$45, createComponent(Show, {
+    }), _el$57);
+    insert(_el$55, createComponent(Show, {
       get when() {
         return showLabel();
       },
       get children() {
-        const _el$48 = _tmpl$20();
-        insert(_el$48, () => props.label);
-        createRenderEffect(() => className(_el$48, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
-        return _el$48;
+        const _el$58 = _tmpl$242();
+        insert(_el$58, () => props.label);
+        createRenderEffect(() => className(_el$58, clsx(styles().queryStatusTagLabel, "tsqd-query-status-tag-label")));
+        return _el$58;
       }
-    }), _el$49);
-    insert(_el$49, () => props.count);
+    }), _el$59);
+    insert(_el$59, () => props.count);
     createRenderEffect((_p$) => {
-      const _v$27 = clsx(u`
+      const _v$31 = clsx(u`
             width: ${tokens.size[1.5]};
             height: ${tokens.size[1.5]};
             border-radius: ${tokens.border.radius.full};
             background-color: ${tokens.colors[props.color][500]};
-          `, "tsqd-query-status-tag-dot"), _v$28 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
+          `, "tsqd-query-status-tag-dot"), _v$32 = clsx(styles().queryStatusCount, props.count > 0 && props.color !== "gray" && u`
               background-color: ${t2(colors[props.color][100], colors[props.color][900])};
               color: ${t2(colors[props.color][700], colors[props.color][300])};
             `, "tsqd-query-status-tag-count");
-      _v$27 !== _p$._v$27 && className(_el$47, _p$._v$27 = _v$27);
-      _v$28 !== _p$._v$28 && className(_el$49, _p$._v$28 = _v$28);
+      _v$31 !== _p$._v$31 && className(_el$57, _p$._v$31 = _v$31);
+      _v$32 !== _p$._v$32 && className(_el$59, _p$._v$32 = _v$32);
       return _p$;
     }, {
-      _v$27: void 0,
-      _v$28: void 0
+      _v$31: void 0,
+      _v$32: void 0
     });
-    return _el$45;
+    return _el$55;
   })();
 };
 var QueryDetails = () => {
@@ -11064,19 +11940,19 @@ var QueryDetails = () => {
       return createMemo(() => !!activeQuery())() && activeQueryState();
     },
     get children() {
-      const _el$50 = _tmpl$24(), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$53.firstChild, _el$55 = _el$54.firstChild, _el$56 = _el$54.nextSibling, _el$57 = _el$53.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$58.nextSibling, _el$60 = _el$57.nextSibling, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$52.nextSibling, _el$64 = _el$63.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.firstChild, _el$67 = _el$65.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$67.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$69.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$71.nextSibling, _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling, _el$84 = _el$64.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$86.nextSibling;
-      insert(_el$55, () => displayValue(activeQuery().queryKey, true));
-      insert(_el$56, statusLabel);
-      insert(_el$59, observerCount);
-      insert(_el$62, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
-      _el$65.$$click = handleRefetch;
-      _el$67.$$click = () => queryClient.invalidateQueries(activeQuery());
-      _el$69.$$click = () => queryClient.resetQueries(activeQuery());
-      _el$71.$$click = () => {
+      const _el$60 = _tmpl$28(), _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$63.firstChild, _el$65 = _el$64.firstChild, _el$66 = _el$64.nextSibling, _el$67 = _el$63.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling, _el$70 = _el$67.nextSibling, _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$62.nextSibling, _el$74 = _el$73.nextSibling, _el$75 = _el$74.firstChild, _el$76 = _el$75.firstChild, _el$77 = _el$75.nextSibling, _el$78 = _el$77.firstChild, _el$79 = _el$77.nextSibling, _el$80 = _el$79.firstChild, _el$81 = _el$79.nextSibling, _el$82 = _el$81.firstChild, _el$83 = _el$81.nextSibling, _el$84 = _el$83.firstChild, _el$85 = _el$84.nextSibling, _el$94 = _el$74.nextSibling, _el$95 = _el$94.nextSibling, _el$96 = _el$95.nextSibling, _el$97 = _el$96.nextSibling;
+      insert(_el$65, () => displayValue(activeQuery().queryKey, true));
+      insert(_el$66, statusLabel);
+      insert(_el$69, observerCount);
+      insert(_el$72, () => new Date(activeQueryState().dataUpdatedAt).toLocaleTimeString());
+      _el$75.$$click = handleRefetch;
+      _el$77.$$click = () => queryClient.invalidateQueries(activeQuery());
+      _el$79.$$click = () => queryClient.resetQueries(activeQuery());
+      _el$81.$$click = () => {
         queryClient.removeQueries(activeQuery());
         setSelectedQueryHash(null);
       };
-      _el$73.$$click = () => {
+      _el$83.$$click = () => {
         if (activeQuery()?.state.data === void 0) {
           setRestoringLoading(true);
           restoreQueryAfterLoadingOrError();
@@ -11104,79 +11980,78 @@ var QueryDetails = () => {
           });
         }
       };
-      insert(_el$73, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$75);
-      insert(_el$64, createComponent(Show, {
+      insert(_el$83, () => queryStatus() === "pending" ? "Restore" : "Trigger", _el$85);
+      insert(_el$74, createComponent(Show, {
         get when() {
           return errorTypes().length === 0 || queryStatus() === "error";
         },
         get children() {
-          const _el$76 = _tmpl$222(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
-          _el$76.$$click = () => {
+          const _el$86 = _tmpl$26(), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
+          _el$86.$$click = () => {
             if (!activeQuery().state.error) {
               triggerError();
             } else {
               queryClient.resetQueries(activeQuery());
             }
           };
-          insert(_el$76, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$78);
+          insert(_el$86, () => queryStatus() === "error" ? "Restore" : "Trigger", _el$88);
           createRenderEffect((_p$) => {
-            const _v$29 = clsx(u`
+            const _v$33 = clsx(u`
                   color: ${t2(colors.red[500], colors.red[400])};
-                `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$30 = queryStatus() === "pending", _v$31 = u`
+                `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error"), _v$34 = queryStatus() === "pending", _v$35 = u`
                   background-color: ${t2(colors.red[500], colors.red[400])};
                 `;
-            _v$29 !== _p$._v$29 && className(_el$76, _p$._v$29 = _v$29);
-            _v$30 !== _p$._v$30 && (_el$76.disabled = _p$._v$30 = _v$30);
-            _v$31 !== _p$._v$31 && className(_el$77, _p$._v$31 = _v$31);
+            _v$33 !== _p$._v$33 && className(_el$86, _p$._v$33 = _v$33);
+            _v$34 !== _p$._v$34 && (_el$86.disabled = _p$._v$34 = _v$34);
+            _v$35 !== _p$._v$35 && className(_el$87, _p$._v$35 = _v$35);
             return _p$;
           }, {
-            _v$29: void 0,
-            _v$30: void 0,
-            _v$31: void 0
+            _v$33: void 0,
+            _v$34: void 0,
+            _v$35: void 0
           });
-          return _el$76;
+          return _el$86;
         }
       }), null);
-      insert(_el$64, createComponent(Show, {
+      insert(_el$74, createComponent(Show, {
         get when() {
           return !(errorTypes().length === 0 || queryStatus() === "error");
         },
         get children() {
-          const _el$79 = _tmpl$232(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling, _el$82 = _el$81.nextSibling; _el$82.firstChild;
-          _el$82.addEventListener("change", (e2) => {
+          const _el$89 = _tmpl$27(), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$91.nextSibling; _el$92.firstChild;
+          _el$92.addEventListener("change", (e2) => {
             const errorType = errorTypes().find((et) => et.name === e2.currentTarget.value);
             triggerError(errorType);
           });
-          insert(_el$82, createComponent(For, {
+          insert(_el$92, createComponent(For, {
             get each() {
               return errorTypes();
             },
             children: (errorType) => (() => {
-              const _el$88 = _tmpl$25();
-              insert(_el$88, () => errorType.name);
-              createRenderEffect(() => _el$88.value = errorType.name);
-              return _el$88;
+              const _el$98 = _tmpl$29();
+              insert(_el$98, () => errorType.name);
+              createRenderEffect(() => _el$98.value = errorType.name);
+              return _el$98;
             })()
           }), null);
-          insert(_el$79, createComponent(ChevronDown, {}), null);
+          insert(_el$89, createComponent(ChevronDown, {}), null);
           createRenderEffect((_p$) => {
-            const _v$32 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$33 = u`
+            const _v$36 = clsx(styles().actionsSelect, "tsqd-query-details-actions-btn", "tsqd-query-details-action-error-multiple"), _v$37 = u`
                   background-color: ${tokens.colors.red[400]};
-                `, _v$34 = queryStatus() === "pending";
-            _v$32 !== _p$._v$32 && className(_el$79, _p$._v$32 = _v$32);
-            _v$33 !== _p$._v$33 && className(_el$80, _p$._v$33 = _v$33);
-            _v$34 !== _p$._v$34 && (_el$82.disabled = _p$._v$34 = _v$34);
+                `, _v$38 = queryStatus() === "pending";
+            _v$36 !== _p$._v$36 && className(_el$89, _p$._v$36 = _v$36);
+            _v$37 !== _p$._v$37 && className(_el$90, _p$._v$37 = _v$37);
+            _v$38 !== _p$._v$38 && (_el$92.disabled = _p$._v$38 = _v$38);
             return _p$;
           }, {
-            _v$32: void 0,
-            _v$33: void 0,
-            _v$34: void 0
+            _v$36: void 0,
+            _v$37: void 0,
+            _v$38: void 0
           });
-          return _el$79;
+          return _el$89;
         }
       }), null);
-      _el$85.style.setProperty("padding", "0.5rem");
-      insert(_el$85, createComponent(Explorer, {
+      insert(_el$95, createComponent(Explorer, {
         label: "Data",
         defaultExpanded: ["Data"],
         get value() {
@@ -11187,8 +12062,7 @@ var QueryDetails = () => {
           return activeQuery();
         }
       }));
-      _el$87.style.setProperty("padding", "0.5rem");
-      insert(_el$87, createComponent(Explorer, {
+      insert(_el$97, createComponent(Explorer, {
         label: "Query",
         defaultExpanded: ["Query", "queryKey"],
         get value() {
@@ -11196,56 +12070,54 @@ var QueryDetails = () => {
         }
       }));
       createRenderEffect((_p$) => {
-        const _v$35 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$36 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$37 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$38 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$39 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$40 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$41 = clsx(u`
+        const _v$39 = clsx(styles().detailsContainer, "tsqd-query-details-container"), _v$40 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$41 = clsx(styles().detailsBody, "tsqd-query-details-summary-container"), _v$42 = clsx(styles().queryDetailsStatus, getQueryStatusColors()), _v$43 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$44 = clsx(styles().actionsBody, "tsqd-query-details-actions-container"), _v$45 = clsx(u`
                 color: ${t2(colors.blue[600], colors.blue[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$42 = statusLabel() === "fetching", _v$43 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-refetch"), _v$46 = statusLabel() === "fetching", _v$47 = u`
                 background-color: ${t2(colors.blue[600], colors.blue[400])};
-              `, _v$44 = clsx(u`
+              `, _v$48 = clsx(u`
                 color: ${t2(colors.yellow[600], colors.yellow[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$45 = queryStatus() === "pending", _v$46 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-invalidate"), _v$49 = queryStatus() === "pending", _v$50 = u`
                 background-color: ${t2(colors.yellow[600], colors.yellow[400])};
-              `, _v$47 = clsx(u`
+              `, _v$51 = clsx(u`
                 color: ${t2(colors.gray[600], colors.gray[300])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$48 = queryStatus() === "pending", _v$49 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-reset"), _v$52 = queryStatus() === "pending", _v$53 = u`
                 background-color: ${t2(colors.gray[600], colors.gray[400])};
-              `, _v$50 = clsx(u`
+              `, _v$54 = clsx(u`
                 color: ${t2(colors.pink[500], colors.pink[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$51 = statusLabel() === "fetching", _v$52 = u`
+              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-remove"), _v$55 = statusLabel() === "fetching", _v$56 = u`
                 background-color: ${t2(colors.pink[500], colors.pink[400])};
-              `, _v$53 = clsx(u`
+              `, _v$57 = clsx(u`
                 color: ${t2(colors.cyan[500], colors.cyan[400])};
-              `, "tsqd-query-details-actions-btn", "tsqd-query-details-action-loading"), _v$54 = restoringLoading(), _v$55 = u`
+              `, "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$56 = clsx(styles().detailsHeader, "tsqd-query-details-header"), _v$57 = clsx(styles().detailsHeader, "tsqd-query-details-header");
-        _v$35 !== _p$._v$35 && className(_el$50, _p$._v$35 = _v$35);
-        _v$36 !== _p$._v$36 && className(_el$51, _p$._v$36 = _v$36);
-        _v$37 !== _p$._v$37 && className(_el$52, _p$._v$37 = _v$37);
-        _v$38 !== _p$._v$38 && className(_el$56, _p$._v$38 = _v$38);
-        _v$39 !== _p$._v$39 && className(_el$63, _p$._v$39 = _v$39);
-        _v$40 !== _p$._v$40 && className(_el$64, _p$._v$40 = _v$40);
-        _v$41 !== _p$._v$41 && className(_el$65, _p$._v$41 = _v$41);
-        _v$42 !== _p$._v$42 && (_el$65.disabled = _p$._v$42 = _v$42);
-        _v$43 !== _p$._v$43 && className(_el$66, _p$._v$43 = _v$43);
-        _v$44 !== _p$._v$44 && className(_el$67, _p$._v$44 = _v$44);
-        _v$45 !== _p$._v$45 && (_el$67.disabled = _p$._v$45 = _v$45);
-        _v$46 !== _p$._v$46 && className(_el$68, _p$._v$46 = _v$46);
-        _v$47 !== _p$._v$47 && className(_el$69, _p$._v$47 = _v$47);
-        _v$48 !== _p$._v$48 && (_el$69.disabled = _p$._v$48 = _v$48);
-        _v$49 !== _p$._v$49 && className(_el$70, _p$._v$49 = _v$49);
-        _v$50 !== _p$._v$50 && className(_el$71, _p$._v$50 = _v$50);
-        _v$51 !== _p$._v$51 && (_el$71.disabled = _p$._v$51 = _v$51);
-        _v$52 !== _p$._v$52 && className(_el$72, _p$._v$52 = _v$52);
-        _v$53 !== _p$._v$53 && className(_el$73, _p$._v$53 = _v$53);
-        _v$54 !== _p$._v$54 && (_el$73.disabled = _p$._v$54 = _v$54);
-        _v$55 !== _p$._v$55 && className(_el$74, _p$._v$55 = _v$55);
-        _v$56 !== _p$._v$56 && className(_el$84, _p$._v$56 = _v$56);
-        _v$57 !== _p$._v$57 && className(_el$86, _p$._v$57 = _v$57);
+              `, _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);
+        _v$42 !== _p$._v$42 && className(_el$66, _p$._v$42 = _v$42);
+        _v$43 !== _p$._v$43 && className(_el$73, _p$._v$43 = _v$43);
+        _v$44 !== _p$._v$44 && className(_el$74, _p$._v$44 = _v$44);
+        _v$45 !== _p$._v$45 && className(_el$75, _p$._v$45 = _v$45);
+        _v$46 !== _p$._v$46 && (_el$75.disabled = _p$._v$46 = _v$46);
+        _v$47 !== _p$._v$47 && className(_el$76, _p$._v$47 = _v$47);
+        _v$48 !== _p$._v$48 && className(_el$77, _p$._v$48 = _v$48);
+        _v$49 !== _p$._v$49 && (_el$77.disabled = _p$._v$49 = _v$49);
+        _v$50 !== _p$._v$50 && className(_el$78, _p$._v$50 = _v$50);
+        _v$51 !== _p$._v$51 && className(_el$79, _p$._v$51 = _v$51);
+        _v$52 !== _p$._v$52 && (_el$79.disabled = _p$._v$52 = _v$52);
+        _v$53 !== _p$._v$53 && className(_el$80, _p$._v$53 = _v$53);
+        _v$54 !== _p$._v$54 && className(_el$81, _p$._v$54 = _v$54);
+        _v$55 !== _p$._v$55 && (_el$81.disabled = _p$._v$55 = _v$55);
+        _v$56 !== _p$._v$56 && className(_el$82, _p$._v$56 = _v$56);
+        _v$57 !== _p$._v$57 && className(_el$83, _p$._v$57 = _v$57);
+        _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 && ((_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$35: void 0,
-        _v$36: void 0,
-        _v$37: void 0,
-        _v$38: void 0,
         _v$39: void 0,
         _v$40: void 0,
         _v$41: void 0,
@@ -11264,27 +12136,166 @@ var QueryDetails = () => {
         _v$54: void 0,
         _v$55: void 0,
         _v$56: void 0,
-        _v$57: void 0
+        _v$57: void 0,
+        _v$58: void 0,
+        _v$59: void 0,
+        _v$60: void 0,
+        _v$61: void 0,
+        _v$62: void 0,
+        _v$63: void 0
       });
-      return _el$50;
+      return _el$60;
+    }
+  });
+};
+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 createComponent(Show, {
+    get when() {
+      return activeMutation();
+    },
+    get children() {
+      const _el$99 = _tmpl$30(), _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling, _el$102 = _el$101.firstChild, _el$103 = _el$102.firstChild, _el$104 = _el$103.firstChild, _el$105 = _el$103.nextSibling, _el$106 = _el$102.nextSibling, _el$107 = _el$106.firstChild, _el$108 = _el$107.nextSibling, _el$109 = _el$101.nextSibling, _el$110 = _el$109.nextSibling, _el$111 = _el$110.nextSibling, _el$112 = _el$111.nextSibling, _el$113 = _el$112.nextSibling, _el$114 = _el$113.nextSibling, _el$115 = _el$114.nextSibling, _el$116 = _el$115.nextSibling;
+      insert(_el$104, createComponent(Show, {
+        get when() {
+          return activeMutation().options.mutationKey;
+        },
+        fallback: "No mutationKey found",
+        get children() {
+          return displayValue(activeMutation().options.mutationKey, true);
+        }
+      }));
+      insert(_el$105, createComponent(Show, {
+        get when() {
+          return color() === "purple";
+        },
+        children: "pending"
+      }), null);
+      insert(_el$105, createComponent(Show, {
+        get when() {
+          return color() !== "purple";
+        },
+        get children() {
+          return status();
+        }
+      }), null);
+      insert(_el$108, () => new Date(activeMutation().state.submittedAt).toLocaleTimeString());
+      insert(_el$110, createComponent(Explorer, {
+        label: "Variables",
+        defaultExpanded: ["Variables"],
+        get value() {
+          return activeMutation().state.variables;
+        }
+      }));
+      insert(_el$112, createComponent(Explorer, {
+        label: "Context",
+        defaultExpanded: ["Context"],
+        get value() {
+          return activeMutation().state.context;
+        }
+      }));
+      insert(_el$114, createComponent(Explorer, {
+        label: "Data",
+        defaultExpanded: ["Data"],
+        get value() {
+          return activeMutation().state.data;
+        }
+      }));
+      insert(_el$116, createComponent(Explorer, {
+        label: "Mutation",
+        defaultExpanded: ["Mutation"],
+        get value() {
+          return activeMutation();
+        }
+      }));
+      createRenderEffect((_p$) => {
+        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$64: void 0,
+        _v$65: void 0,
+        _v$66: void 0,
+        _v$67: void 0,
+        _v$68: 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;
     }
   });
 };
-var signalsMap = /* @__PURE__ */ new Map();
+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;
@@ -11300,9 +12311,45 @@ 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;
 };
@@ -11402,7 +12449,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`
@@ -11410,7 +12457,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`
@@ -11584,7 +12631,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 {
@@ -11596,8 +12643,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;
       }
@@ -11731,6 +12789,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])};
         }
       }
@@ -11816,8 +12876,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;
@@ -11969,6 +13029,8 @@ var stylesFactory2 = (theme) => {
 
       & pre {
         margin: 0;
+        display: flex;
+        align-items: center;
       }
     `,
     queryDetailsStatus: u`
@@ -12148,6 +13210,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]};
+        }
+      }
     `
   };
 };
@@ -12360,8 +13472,6 @@ delegateEvents(["click", "mousedown", "input"]);
    * 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.
@@ -12716,4 +13826,4 @@ delegateEvents(["click", "mousedown", "input"]);
    *)
 */
 
-export { Devtools, DevtoolsComponent, DevtoolsPanel, QueryRow, QueryStatus, QueryStatusCount, Devtools_default as default };
+export { Devtools, DevtoolsComponent, DevtoolsPanel, MutationRow, MutationStatusCount, QueryRow, QueryStatus, QueryStatusCount, Devtools_default as default };