@tanstack/query-devtools 5.0.5 → 5.4.2

package/build/dev.cjs

@@ -6127,6 +6127,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");
+}
 function createHideOutside(props) {
   createEffect(() => {
     if (access(props.isDisabled)) {
@@ -6556,6 +6579,70 @@ function createToggleState(props = {}) {
     toggle
   };
 }
+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
+  };
+}
+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) {
@@ -6605,6 +6692,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));
+}
 function isRTL2(locale) {
   if (Intl.Locale) {
     const script = new Intl.Locale(locale).maximize().script ?? "";
@@ -9052,7 +9193,316 @@ function DropdownMenuRoot(props) {
   }, props);
   return createComponent(MenuRoot, props);
 }
-var DATA_TOP_LAYER_ATTR, originalBodyPointerEvents, hasDisabledBodyPointerEvents, layers, layerStack, AUTOFOCUS_ON_MOUNT_EVENT, AUTOFOCUS_ON_UNMOUNT_EVENT, EVENT_OPTIONS, focusScopeStack, DATA_LIVE_ANNOUNCER_ATTR, refCountMap, observerStack, POINTER_DOWN_OUTSIDE_EVENT, FOCUS_OUTSIDE_EVENT, SCROLL_LOCK_IDENTIFIER, AS_COMPONENT_SYMBOL, RTL_SCRIPTS, RTL_LANGS, currentLocale, listeners, I18nContext, cache$1, Selection, SelectionManager, ListCollection, ListKeyboardDelegate, BUTTON_INPUT_TYPES, DomCollectionContext, DismissableLayerContext, PopperContext, _tmpl$$e, DEFAULT_SIZE, HALF_DEFAULT_SIZE, ROTATION_DEG, REVERSE_BASE_PLACEMENT, MenuContext, MenuRootContext, MenuItemContext, MenuGroupContext, MenuRadioGroupContext, SUB_CLOSE_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, index$d;
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (context === void 0) {
+    throw new Error("[kobalte]: `useRadioGroupContext` must be used within a `RadioGroup` component");
+  }
+  return context;
+}
+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));
+    }
+  });
+}
+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$;
+  })();
+}
+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 DATA_TOP_LAYER_ATTR, originalBodyPointerEvents, hasDisabledBodyPointerEvents, layers, layerStack, AUTOFOCUS_ON_MOUNT_EVENT, AUTOFOCUS_ON_UNMOUNT_EVENT, EVENT_OPTIONS, focusScopeStack, DATA_LIVE_ANNOUNCER_ATTR, refCountMap, observerStack, POINTER_DOWN_OUTSIDE_EVENT, FOCUS_OUTSIDE_EVENT, SCROLL_LOCK_IDENTIFIER, FORM_CONTROL_PROP_NAMES, FormControlContext, AS_COMPONENT_SYMBOL, RTL_SCRIPTS, RTL_LANGS, currentLocale, listeners, I18nContext, cache$1, Selection, SelectionManager, ListCollection, ListKeyboardDelegate, BUTTON_INPUT_TYPES, DomCollectionContext, DismissableLayerContext, PopperContext, _tmpl$$e, DEFAULT_SIZE, HALF_DEFAULT_SIZE, ROTATION_DEG, REVERSE_BASE_PLACEMENT, MenuContext, MenuRootContext, MenuItemContext, MenuGroupContext, MenuRadioGroupContext, SUB_CLOSE_KEYS, SELECTION_KEYS, SUB_OPEN_KEYS, index$d, RadioGroupContext, RadioGroupItemContext, _tmpl$$6, _tmpl$$5, index$7;
 var init_esm = __esm({
   "../../node_modules/.pnpm/@kobalte+core@0.11.0_solid-js@1.8.1/node_modules/@kobalte/core/dist/esm/index.js"() {
     init_dist9();
@@ -9107,6 +9557,8 @@ var init_esm = __esm({
     POINTER_DOWN_OUTSIDE_EVENT = "interactOutside.pointerDownOutside";
     FOCUS_OUTSIDE_EVENT = "interactOutside.focusOutside";
     SCROLL_LOCK_IDENTIFIER = "data-kb-scroll-lock";
+    FORM_CONTROL_PROP_NAMES = ["id", "name", "validationState", "required", "disabled", "readOnly"];
+    FormControlContext = createContext();
     AS_COMPONENT_SYMBOL = Symbol("$$KobalteAsComponent");
     RTL_SCRIPTS = /* @__PURE__ */ new Set(["Avst", "Arab", "Armi", "Syrc", "Samr", "Mand", "Thaa", "Mend", "Nkoo", "Adlm", "Rohg", "Hebr"]);
     RTL_LANGS = /* @__PURE__ */ new Set(["ae", "ar", "arc", "bcc", "bqi", "ckb", "dv", "fa", "glk", "he", "ku", "mzn", "nqo", "pnb", "ps", "sd", "ug", "ur", "yi"]);
@@ -10013,6 +10465,23 @@ var init_esm = __esm({
       SubTrigger: MenuSubTrigger,
       Trigger: MenuTrigger
     });
+    RadioGroupContext = createContext();
+    RadioGroupItemContext = createContext();
+    _tmpl$$6 = /* @__PURE__ */ template(`<input type="radio">`);
+    _tmpl$$5 = /* @__PURE__ */ template(`<label>`);
+    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
+    });
     delegateEvents(["focusin", "focusout", "pointermove"]);
     delegateEvents(["keydown", "pointerdown", "pointermove", "pointerup"]);
   }
@@ -10115,17 +10584,17 @@ var init_theme = __esm({
           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",
@@ -10208,35 +10677,35 @@ var init_theme = __esm({
       },
       font: {
         size: {
-          "2xs": "0.625rem",
-          xs: "0.75rem",
-          sm: "0.875rem",
-          md: "1rem",
-          lg: "1.125rem",
-          xl: "1.25rem",
-          "2xl": "1.5rem",
-          "3xl": "1.875rem",
-          "4xl": "2.25rem",
-          "5xl": "3rem",
-          "6xl": "3.75rem",
-          "7xl": "4.5rem",
-          "8xl": "6rem",
-          "9xl": "8rem"
+          "2xs": "calc(var(--tsqd-font-size) * 0.625)",
+          xs: "calc(var(--tsqd-font-size) * 0.75)",
+          sm: "calc(var(--tsqd-font-size) * 0.875)",
+          md: "var(--tsqd-font-size)",
+          lg: "calc(var(--tsqd-font-size) * 1.125)",
+          xl: "calc(var(--tsqd-font-size) * 1.25)",
+          "2xl": "calc(var(--tsqd-font-size) * 1.5)",
+          "3xl": "calc(var(--tsqd-font-size) * 1.875)",
+          "4xl": "calc(var(--tsqd-font-size) * 2.25)",
+          "5xl": "calc(var(--tsqd-font-size) * 3)",
+          "6xl": "calc(var(--tsqd-font-size) * 3.75)",
+          "7xl": "calc(var(--tsqd-font-size) * 4.5)",
+          "8xl": "calc(var(--tsqd-font-size) * 6)",
+          "9xl": "calc(var(--tsqd-font-size) * 8)"
         },
         lineHeight: {
-          xs: "1rem",
-          sm: "1.25rem",
-          md: "1.5rem",
-          lg: "1.75rem",
-          xl: "1.75rem",
-          "2xl": "2rem",
-          "3xl": "2.25rem",
-          "4xl": "2.5rem",
-          "5xl": "1",
-          "6xl": "1",
-          "7xl": "1",
-          "8xl": "1",
-          "9xl": "1"
+          xs: "calc(var(--tsqd-font-size) * 1)",
+          sm: "calc(var(--tsqd-font-size) * 1.25)",
+          md: "calc(var(--tsqd-font-size) * 1.5)",
+          lg: "calc(var(--tsqd-font-size) * 1.75)",
+          xl: "calc(var(--tsqd-font-size) * 2)",
+          "2xl": "calc(var(--tsqd-font-size) * 2.25)",
+          "3xl": "calc(var(--tsqd-font-size) * 2.5)",
+          "4xl": "calc(var(--tsqd-font-size) * 2.75)",
+          "5xl": "calc(var(--tsqd-font-size) * 3)",
+          "6xl": "calc(var(--tsqd-font-size) * 3.25)",
+          "7xl": "calc(var(--tsqd-font-size) * 3.5)",
+          "8xl": "calc(var(--tsqd-font-size) * 3.75)",
+          "9xl": "calc(var(--tsqd-font-size) * 4)"
         },
         weight: {
           thin: "100",
@@ -10261,55 +10730,55 @@ var init_theme = __esm({
       border: {
         radius: {
           none: "0px",
-          xs: "0.125rem",
-          sm: "0.25rem",
-          md: "0.375rem",
-          lg: "0.5rem",
-          xl: "0.75rem",
-          "2xl": "1rem",
-          "3xl": "1.5rem",
+          xs: "calc(var(--tsqd-font-size) * 0.125)",
+          sm: "calc(var(--tsqd-font-size) * 0.25)",
+          md: "calc(var(--tsqd-font-size) * 0.375)",
+          lg: "calc(var(--tsqd-font-size) * 0.5)",
+          xl: "calc(var(--tsqd-font-size) * 0.75)",
+          "2xl": "calc(var(--tsqd-font-size) * 1)",
+          "3xl": "calc(var(--tsqd-font-size) * 1.5)",
           full: "9999px"
         }
       },
       size: {
         0: "0px",
-        0.25: "0.0625rem",
-        0.5: "0.125rem",
-        1: "0.25rem",
-        1.5: "0.375rem",
-        2: "0.5rem",
-        2.5: "0.625rem",
-        3: "0.75rem",
-        3.5: "0.875rem",
-        4: "1rem",
-        4.5: "1.125rem",
-        5: "1.25rem",
-        5.5: "1.375rem",
-        6: "1.5rem",
-        6.5: "1.625rem",
-        7: "1.75rem",
-        8: "2rem",
-        9: "2.25rem",
-        10: "2.5rem",
-        11: "2.75rem",
-        12: "3rem",
-        14: "3.5rem",
-        16: "4rem",
-        20: "5rem",
-        24: "6rem",
-        28: "7rem",
-        32: "8rem",
-        36: "9rem",
-        40: "10rem",
-        44: "11rem",
-        48: "12rem",
-        52: "13rem",
-        56: "14rem",
-        60: "15rem",
-        64: "16rem",
-        72: "18rem",
-        80: "20rem",
-        96: "24rem"
+        0.25: "calc(var(--tsqd-font-size) * 0.0625)",
+        0.5: "calc(var(--tsqd-font-size) * 0.125)",
+        1: "calc(var(--tsqd-font-size) * 0.25)",
+        1.5: "calc(var(--tsqd-font-size) * 0.375)",
+        2: "calc(var(--tsqd-font-size) * 0.5)",
+        2.5: "calc(var(--tsqd-font-size) * 0.625)",
+        3: "calc(var(--tsqd-font-size) * 0.75)",
+        3.5: "calc(var(--tsqd-font-size) * 0.875)",
+        4: "calc(var(--tsqd-font-size) * 1)",
+        4.5: "calc(var(--tsqd-font-size) * 1.125)",
+        5: "calc(var(--tsqd-font-size) * 1.25)",
+        5.5: "calc(var(--tsqd-font-size) * 1.375)",
+        6: "calc(var(--tsqd-font-size) * 1.5)",
+        6.5: "calc(var(--tsqd-font-size) * 1.625)",
+        7: "calc(var(--tsqd-font-size) * 1.75)",
+        8: "calc(var(--tsqd-font-size) * 2)",
+        9: "calc(var(--tsqd-font-size) * 2.25)",
+        10: "calc(var(--tsqd-font-size) * 2.5)",
+        11: "calc(var(--tsqd-font-size) * 2.75)",
+        12: "calc(var(--tsqd-font-size) * 3)",
+        14: "calc(var(--tsqd-font-size) * 3.5)",
+        16: "calc(var(--tsqd-font-size) * 4)",
+        20: "calc(var(--tsqd-font-size) * 5)",
+        24: "calc(var(--tsqd-font-size) * 6)",
+        28: "calc(var(--tsqd-font-size) * 7)",
+        32: "calc(var(--tsqd-font-size) * 8)",
+        36: "calc(var(--tsqd-font-size) * 9)",
+        40: "calc(var(--tsqd-font-size) * 10)",
+        44: "calc(var(--tsqd-font-size) * 11)",
+        48: "calc(var(--tsqd-font-size) * 12)",
+        52: "calc(var(--tsqd-font-size) * 13)",
+        56: "calc(var(--tsqd-font-size) * 14)",
+        60: "calc(var(--tsqd-font-size) * 15)",
+        64: "calc(var(--tsqd-font-size) * 16)",
+        72: "calc(var(--tsqd-font-size) * 18)",
+        80: "calc(var(--tsqd-font-size) * 20)",
+        96: "calc(var(--tsqd-font-size) * 24)"
       },
       shadow: Shadow,
       zIndices: {
@@ -11450,10 +11919,16 @@ 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";
 }
-var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, convertRemToPixels, getPreferredColorScheme, updateNestedDataByPath, deleteNestedDataByPath;
+var displayValue, getStatusRank, queryHashSort, dateSort, statusAndDateSort, sortFns, getMutationStatusRank, mutationDateSort, mutationStatusSort, mutationSortFns, convertRemToPixels, getPreferredColorScheme, updateNestedDataByPath, deleteNestedDataByPath;
 var init_utils = __esm({
   "src/utils.tsx"() {
     init_esm2();
@@ -11478,6 +11953,18 @@ var init_utils = __esm({
       "query hash": queryHashSort,
       "last updated": dateSort
     };
+    getMutationStatusRank = (m) => m.state.isPaused ? 0 : m.state.status === "error" ? 2 : m.state.status === "pending" ? 1 : 3;
+    mutationDateSort = (a2, b2) => a2.state.submittedAt < b2.state.submittedAt ? 1 : -1;
+    mutationStatusSort = (a2, b2) => {
+      if (getMutationStatusRank(a2) === getMutationStatusRank(b2)) {
+        return mutationDateSort(a2, b2);
+      }
+      return getMutationStatusRank(a2) > getMutationStatusRank(b2) ? 1 : -1;
+    };
+    mutationSortFns = {
+      status: mutationStatusSort,
+      "last updated": mutationDateSort
+    };
     convertRemToPixels = (rem) => {
       return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
     };
@@ -11662,92 +12149,104 @@ 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;
   })();
 }
-var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12, _tmpl$13, _tmpl$14, _tmpl$15, _tmpl$16, _tmpl$17;
+var _tmpl$, _tmpl$2, _tmpl$3, _tmpl$4, _tmpl$5, _tmpl$6, _tmpl$7, _tmpl$8, _tmpl$9, _tmpl$10, _tmpl$11, _tmpl$12, _tmpl$13, _tmpl$14, _tmpl$15, _tmpl$16, _tmpl$17, _tmpl$18, _tmpl$19, _tmpl$20, _tmpl$21;
 var init_icons = __esm({
   "src/icons/index.tsx"() {
     init_web();
@@ -11771,7 +12270,11 @@ var init_icons = __esm({
     _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>`);
     _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>`);
     _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>`);
-    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
+    _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>`);
   }
 });
 
@@ -12146,7 +12649,7 @@ function Explorer(props) {
     return _el$6;
   })();
 }
-var _tmpl$18, _tmpl$22, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, _tmpl$72, _tmpl$82, _tmpl$92, _tmpl$102, _tmpl$112, Expander, CopyButton, ClearArrayButton, DeleteItemButton, ToggleValueButton, stylesFactory, lightStyles, darkStyles;
+var _tmpl$22, _tmpl$23, _tmpl$32, _tmpl$42, _tmpl$52, _tmpl$62, _tmpl$72, _tmpl$82, _tmpl$92, _tmpl$102, _tmpl$112, Expander, CopyButton, ClearArrayButton, DeleteItemButton, ToggleValueButton, stylesFactory, lightStyles, darkStyles;
 var init_Explorer = __esm({
   "src/Explorer.tsx"() {
     init_web();
@@ -12167,8 +12670,8 @@ var init_Explorer = __esm({
     init_utils();
     init_icons();
     init_Context();
-    _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>`);
-    _tmpl$22 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
+    _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>`);
+    _tmpl$23 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`);
     _tmpl$32 = /* @__PURE__ */ template(`<button title="Remove all items"aria-label="Remove all items">`);
     _tmpl$42 = /* @__PURE__ */ template(`<button title="Delete item"aria-label="Delete item">`);
     _tmpl$52 = /* @__PURE__ */ template(`<button title="Toggle value"aria-label="Toggle value">`);
@@ -12184,7 +12687,7 @@ var init_Explorer = __esm({
         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`
@@ -12202,7 +12705,7 @@ var init_Explorer = __esm({
       });
       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");
@@ -12363,8 +12866,8 @@ var init_Explorer = __esm({
         expanderButtonContainer: u`
       display: flex;
       align-items: center;
-      line-height: 1.125rem;
-      min-height: 1.125rem;
+      line-height: ${size2[4]};
+      min-height: ${size2[4]};
       gap: ${size2[2]};
     `,
         expanderButton: u`
@@ -12372,7 +12875,7 @@ var init_Explorer = __esm({
       color: inherit;
       font: inherit;
       outline: inherit;
-      height: 1rem;
+      height: ${size2[5]};
       background: transparent;
       border: none;
       padding: 0;
@@ -12414,8 +12917,8 @@ var init_Explorer = __esm({
       display: inline-flex;
       gap: ${size2[2]};
       width: 100%;
-      margin-bottom: ${size2[0.5]};
-      line-height: 1.125rem;
+      margin: ${size2[0.25]} 0px;
+      line-height: ${size2[4.5]};
       align-items: center;
     `,
         editableInput: u`
@@ -12480,12 +12983,14 @@ __export(Devtools_exports, {
   Devtools: () => Devtools,
   DevtoolsComponent: () => DevtoolsComponent,
   DevtoolsPanel: () => DevtoolsPanel,
+  MutationRow: () => MutationRow,
+  MutationStatusCount: () => MutationStatusCount,
   QueryRow: () => QueryRow,
   QueryStatus: () => QueryStatus,
   QueryStatusCount: () => QueryStatusCount,
   default: () => Devtools_default
 });
-var _tmpl$19, _tmpl$23, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$20, _tmpl$21, _tmpl$222, _tmpl$232, _tmpl$24, _tmpl$25, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, selectedQueryHash, setSelectedQueryHash, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, QueryRow, QueryStatusCount, QueryStatus, QueryDetails, signalsMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
+var _tmpl$24, _tmpl$25, _tmpl$33, _tmpl$43, _tmpl$53, _tmpl$63, _tmpl$73, _tmpl$83, _tmpl$93, _tmpl$103, _tmpl$113, _tmpl$122, _tmpl$132, _tmpl$142, _tmpl$152, _tmpl$162, _tmpl$172, _tmpl$182, _tmpl$192, _tmpl$202, _tmpl$212, _tmpl$222, _tmpl$232, _tmpl$242, _tmpl$252, _tmpl$26, _tmpl$27, _tmpl$28, _tmpl$29, _tmpl$30, firstBreakpoint, secondBreakpoint, thirdBreakpoint, BUTTON_POSITION, POSITION, THEME_PREFERENCE, INITIAL_IS_OPEN, DEFAULT_HEIGHT, DEFAULT_WIDTH, DEFAULT_SORT_FN_NAME, DEFAULT_SORT_ORDER, DEFAULT_MUTATION_SORT_FN_NAME, selectedQueryHash, setSelectedQueryHash, selectedMutationId, setSelectedMutationId, panelWidth, setPanelWidth, DevtoolsComponent, Devtools_default, Devtools, DevtoolsPanel, ContentView, QueryRow, MutationRow, QueryStatusCount, MutationStatusCount, QueryStatus, QueryDetails, MutationDetails, queryCacheMap, setupQueryCacheSubscription, createSubscribeToQueryCacheBatcher, mutationCacheMap, setupMutationCacheSubscription, createSubscribeToMutationCacheBatcher, stylesFactory2, lightStyles2, darkStyles2;
 var init_Devtools = __esm({
   "src/Devtools.tsx"() {
     init_web();
@@ -12514,31 +13019,36 @@ var init_Devtools = __esm({
     init_Explorer();
     init_Context();
     init_fonts();
-    _tmpl$19 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
-    _tmpl$23 = /* @__PURE__ */ template(`<div>`);
-    _tmpl$33 = /* @__PURE__ */ template(`<span>Asc`);
-    _tmpl$43 = /* @__PURE__ */ template(`<span>Desc`);
-    _tmpl$53 = /* @__PURE__ */ template(`<div>Settings`);
-    _tmpl$63 = /* @__PURE__ */ template(`<span>Position`);
-    _tmpl$73 = /* @__PURE__ */ template(`<span>Top`);
-    _tmpl$83 = /* @__PURE__ */ template(`<span>Bottom`);
-    _tmpl$93 = /* @__PURE__ */ template(`<span>Left`);
-    _tmpl$103 = /* @__PURE__ */ template(`<span>Right`);
-    _tmpl$113 = /* @__PURE__ */ template(`<span>Theme`);
-    _tmpl$122 = /* @__PURE__ */ template(`<span>Light`);
-    _tmpl$132 = /* @__PURE__ */ template(`<span>Dark`);
-    _tmpl$142 = /* @__PURE__ */ template(`<span>System`);
-    _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>`);
-    _tmpl$162 = /* @__PURE__ */ template(`<option>Sort by `);
-    _tmpl$172 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
-    _tmpl$182 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
-    _tmpl$192 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
-    _tmpl$20 = /* @__PURE__ */ template(`<span>`);
-    _tmpl$21 = /* @__PURE__ */ template(`<button><span></span><span>`);
-    _tmpl$222 = /* @__PURE__ */ template(`<button><span></span> Error`);
-    _tmpl$232 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
-    _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">`);
-    _tmpl$25 = /* @__PURE__ */ template(`<option>`);
+    _tmpl$24 = /* @__PURE__ */ template(`<div><div aria-hidden=true></div><button aria-label="Open Tanstack query devtools">`);
+    _tmpl$25 = /* @__PURE__ */ template(`<div>`);
+    _tmpl$33 = /* @__PURE__ */ template(`<aside aria-label="Tanstack query devtools"><div></div><button aria-label="Close tanstack query devtools">`);
+    _tmpl$43 = /* @__PURE__ */ template(`<select>`);
+    _tmpl$53 = /* @__PURE__ */ template(`<span>Asc`);
+    _tmpl$63 = /* @__PURE__ */ template(`<span>Desc`);
+    _tmpl$73 = /* @__PURE__ */ template(`<div>Settings`);
+    _tmpl$83 = /* @__PURE__ */ template(`<span>Position`);
+    _tmpl$93 = /* @__PURE__ */ template(`<span>Top`);
+    _tmpl$103 = /* @__PURE__ */ template(`<span>Bottom`);
+    _tmpl$113 = /* @__PURE__ */ template(`<span>Left`);
+    _tmpl$122 = /* @__PURE__ */ template(`<span>Right`);
+    _tmpl$132 = /* @__PURE__ */ template(`<span>Theme`);
+    _tmpl$142 = /* @__PURE__ */ template(`<span>Light`);
+    _tmpl$152 = /* @__PURE__ */ template(`<span>Dark`);
+    _tmpl$162 = /* @__PURE__ */ template(`<span>System`);
+    _tmpl$172 = /* @__PURE__ */ template(`<div><div class=tsqd-queries-container>`);
+    _tmpl$182 = /* @__PURE__ */ template(`<div><div class=tsqd-mutations-container>`);
+    _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>`);
+    _tmpl$202 = /* @__PURE__ */ template(`<option>Sort by `);
+    _tmpl$212 = /* @__PURE__ */ template(`<div class=tsqd-query-disabled-indicator>disabled`);
+    _tmpl$222 = /* @__PURE__ */ template(`<button><div></div><code class=tsqd-query-hash>`);
+    _tmpl$232 = /* @__PURE__ */ template(`<div role=tooltip id=tsqd-status-tooltip>`);
+    _tmpl$242 = /* @__PURE__ */ template(`<span>`);
+    _tmpl$252 = /* @__PURE__ */ template(`<button><span></span><span>`);
+    _tmpl$26 = /* @__PURE__ */ template(`<button><span></span> Error`);
+    _tmpl$27 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
+    _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">`);
+    _tmpl$29 = /* @__PURE__ */ template(`<option>`);
+    _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">`);
     firstBreakpoint = 1024;
     secondBreakpoint = 796;
     thirdBreakpoint = 700;
@@ -12550,7 +13060,9 @@ var init_Devtools = __esm({
     DEFAULT_WIDTH = 500;
     DEFAULT_SORT_FN_NAME = Object.keys(sortFns)[0];
     DEFAULT_SORT_ORDER = 1;
+    DEFAULT_MUTATION_SORT_FN_NAME = Object.keys(mutationSortFns)[0];
     [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
+    [selectedMutationId, setSelectedMutationId] = createSignal(null);
     [panelWidth, setPanelWidth] = createSignal(0);
     DevtoolsComponent = (props) => {
       const [localStore, setLocalStore] = createLocalStorage({
@@ -12594,16 +13106,31 @@ var init_Devtools = __esm({
       const position = createMemo(() => {
         return props.localStore.position || useQueryDevtoolsContext().position || POSITION;
       });
+      let transitionsContainerRef;
       createEffect(() => {
-        const root = document.querySelector(".tsqd-parent-container");
+        const root = transitionsContainerRef.parentElement;
         const height = props.localStore.height || DEFAULT_HEIGHT;
         const width = props.localStore.width || DEFAULT_WIDTH;
         const panelPosition = position();
         root.style.setProperty("--tsqd-panel-height", `${panelPosition === "top" ? "-" : ""}${height}px`);
         root.style.setProperty("--tsqd-panel-width", `${panelPosition === "left" ? "-" : ""}${width}px`);
       });
+      onMount(() => {
+        const onFocus = () => {
+          const root = transitionsContainerRef.parentElement;
+          const fontSize = getComputedStyle(root).fontSize;
+          root.style.setProperty("--tsqd-font-size", fontSize);
+        };
+        onFocus();
+        window.addEventListener("focus", onFocus);
+        onCleanup(() => {
+          window.removeEventListener("focus", onFocus);
+        });
+      });
       return (() => {
-        const _el$ = _tmpl$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() {
@@ -12632,7 +13159,7 @@ var init_Devtools = __esm({
                 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, {}));
@@ -12672,24 +13199,7 @@ var init_Devtools = __esm({
         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)
@@ -12737,8 +13247,6 @@ var init_Devtools = __esm({
         document.addEventListener("mousemove", runDrag, false);
         document.addEventListener("mouseup", unsub, false);
       };
-      setupQueryCacheSubscription();
-      let queriesContainerRef;
       let panelRef;
       onMount(() => {
         createResizeObserver(panelRef, ({
@@ -12749,9 +13257,6 @@ var init_Devtools = __esm({
           }
         });
       });
-      const setDevtoolsPosition = (pos) => {
-        props.setLocalStore("position", pos);
-      };
       createEffect(() => {
         const rootContainer = panelRef.parentElement?.parentElement?.parentElement;
         if (!rootContainer)
@@ -12796,52 +13301,238 @@ var init_Devtools = __esm({
     `;
       };
       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;
-          },
-          get children() {
-            return [_tmpl$33(), createComponent(ArrowUp, {})];
-          }
-        }), null);
-        insert(_el$20, createComponent(Show, {
-          get when() {
-            return sortOrder() === -1;
+        insert(_el$5, createComponent(ContentView, {
+          get localStore() {
+            return props.localStore;
           },
-          get children() {
-            return [_tmpl$43(), createComponent(ArrowDown, {})];
+          get setLocalStore() {
+            return props.setLocalStore;
           }
         }), null);
-        _el$24.$$click = () => {
-          cache().clear();
-        };
-        insert(_el$24, createComponent(Trash, {}));
-        _el$25.$$click = () => {
+        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;
+      })();
+    };
+    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() {
+            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$19, createComponent(Show, {
+          get when() {
+            return selectedView() === "mutations";
+          },
+          get children() {
+            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);
+        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$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);
@@ -12850,11 +13541,11 @@ var init_Devtools = __esm({
             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, {
@@ -12865,6 +13556,7 @@ var init_Devtools = __esm({
                 return createComponent(Settings, {});
               }
             }), createComponent(index$d.Portal, {
+              ref: (el) => setComputedVariables(el),
               get children() {
                 return createComponent(index$d.Content, {
                   get ["class"]() {
@@ -12872,9 +13564,9 @@ var init_Devtools = __esm({
                   },
                   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,
@@ -12885,9 +13577,10 @@ var init_Devtools = __esm({
                             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"]() {
@@ -12903,7 +13596,7 @@ var init_Devtools = __esm({
                                     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: () => {
@@ -12914,7 +13607,7 @@ var init_Devtools = __esm({
                                     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: () => {
@@ -12925,7 +13618,7 @@ var init_Devtools = __esm({
                                     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: () => {
@@ -12936,7 +13629,7 @@ var init_Devtools = __esm({
                                     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, {})];
                                   }
                                 })];
                               }
@@ -12954,9 +13647,10 @@ var init_Devtools = __esm({
                             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"]() {
@@ -12972,7 +13666,7 @@ var init_Devtools = __esm({
                                     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: () => {
@@ -12983,7 +13677,7 @@ var init_Devtools = __esm({
                                     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: () => {
@@ -12994,7 +13688,7 @@ var init_Devtools = __esm({
                                     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, {})];
                                   }
                                 })];
                               }
@@ -13009,66 +13703,74 @@ var init_Devtools = __esm({
             })];
           }
         }), 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,
@@ -13086,12 +13788,26 @@ var init_Devtools = __esm({
           _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, {});
+        }
+      })];
     };
     QueryRow = (props) => {
       const theme = useTheme();
@@ -13137,30 +13853,140 @@ var init_Devtools = __esm({
           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$46;
+        }
+      });
+    };
+    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$40;
+          return _el$50;
         }
       });
     };
@@ -13175,44 +14001,99 @@ var init_Devtools = __esm({
         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;
+      })();
+    };
+    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;
       })();
     };
     QueryStatus = (props) => {
@@ -13240,17 +14121,17 @@ var init_Devtools = __esm({
         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();
           },
@@ -13265,47 +14146,47 @@ var init_Devtools = __esm({
         }, () => 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;
       })();
     };
     QueryDetails = () => {
@@ -13392,19 +14273,19 @@ var init_Devtools = __esm({
           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();
@@ -13432,79 +14313,78 @@ var init_Devtools = __esm({
               });
             }
           };
-          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() {
@@ -13515,8 +14395,7 @@ var init_Devtools = __esm({
               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() {
@@ -13524,56 +14403,54 @@ var init_Devtools = __esm({
             }
           }));
           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,
@@ -13592,27 +14469,166 @@ var init_Devtools = __esm({
             _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;
         }
       });
     };
-    signalsMap = /* @__PURE__ */ new Map();
+    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;
+        }
+      });
+    };
+    queryCacheMap = /* @__PURE__ */ new Map();
     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;
@@ -13628,9 +14644,45 @@ var init_Devtools = __esm({
       createEffect(() => {
         setValue(callback(queryCache));
       });
-      signalsMap.set(callback, setValue);
+      queryCacheMap.set(callback, setValue);
       onCleanup(() => {
-        signalsMap.delete(callback);
+        queryCacheMap.delete(callback);
+      });
+      return value;
+    };
+    mutationCacheMap = /* @__PURE__ */ new Map();
+    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;
+    };
+    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(() => {
+        mutationCacheMap.delete(callback);
       });
       return value;
     };
@@ -13730,7 +14782,7 @@ var init_Devtools = __esm({
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-bottom: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
         "panel-position-bottom": u`
@@ -13738,7 +14790,7 @@ var init_Devtools = __esm({
       right: 0;
       left: 0;
       max-height: 90%;
-      min-height: 3.5rem;
+      min-height: ${size2[14]};
       border-top: ${t2(colors.gray[400], colors.darkGray[300])} 1px solid;
     `,
         "panel-position-right": u`
@@ -13912,7 +14964,7 @@ var init_Devtools = __esm({
       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 {
@@ -13923,9 +14975,20 @@ var init_Devtools = __esm({
         gap: ${size2[0.5]};
         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;
       }
@@ -14059,6 +15122,8 @@ var init_Devtools = __esm({
           outline: 2px solid ${colors.blue[800]};
         }
         & svg {
+          width: ${tokens.size[3]};
+          height: ${tokens.size[3]};
           color: ${t2(colors.gray[500], colors.gray[400])};
         }
       }
@@ -14144,8 +15209,8 @@ var init_Devtools = __esm({
       border-radius: ${tokens.border.radius.sm};
       background-color: ${t2(colors.gray[100], colors.darkGray[400])};
       border: 1px solid ${t2(colors.gray[300], colors.darkGray[200])};
-      width: 1.625rem;
-      height: 1.625rem;
+      width: ${tokens.size[6.5]};
+      height: ${tokens.size[6.5]};
       justify-content: center;
       display: flex;
       align-items: center;
@@ -14297,6 +15362,8 @@ var init_Devtools = __esm({
 
       & pre {
         margin: 0;
+        display: flex;
+        align-items: center;
       }
     `,
         queryDetailsStatus: u`
@@ -14476,6 +15543,56 @@ var init_Devtools = __esm({
       &: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]};
+        }
+      }
     `
       };
     };