mkayander · mkayander · May 21, 2026 · May 21, 2026 · May 21, 2026 · May 21, 2026
diff --git a/package.json b/package.json
@@ -56,32 +56,32 @@
     "@emotion/styled": "^11.14.1",
     "@hello-pangea/dnd": "^18.0.1",
     "@monaco-editor/react": "^4.7.0",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/lab": "7.0.1-beta.19",
-    "@mui/material": "^7.3.9",
-    "@mui/x-charts": "^8.28.2",
+    "@mui/icons-material": "^9.0.1",
+    "@mui/lab": "9.0.0-beta.3",
+    "@mui/material": "^9.0.1",
+    "@mui/x-charts": "^9.3.0",
     "@next-auth/prisma-adapter": "1.0.7",
-    "@prisma/adapter-pg": "^7.6.0",
-    "@prisma/client": "7.5.0",
+    "@prisma/adapter-pg": "^7.8.0",
+    "@prisma/client": "7.8.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "@tanstack/react-query": "^5.96.2",
-    "@trpc/client": "11.15.0",
-    "@trpc/next": "11.15.0",
-    "@trpc/react-query": "11.15.0",
-    "@trpc/server": "11.15.0",
+    "@tanstack/react-query": "^5.100.11",
+    "@trpc/client": "11.17.0",
+    "@trpc/next": "11.17.0",
+    "@trpc/react-query": "11.17.0",
+    "@trpc/server": "11.17.0",
     "@upstash/redis": "^1.37.0",
     "@vercel/analytics": "^1.6.1",
     "@vercel/edge-config": "^1.4.3",
     "@vercel/speed-insights": "^1.3.1",
     "aws-sdk": "^2.1693.0",
-    "axios": "1.15.2",
+    "axios": "1.16.1",
     "clsx": "^2.1.1",
     "cookie": "^1.1.1",
     "cookies-next": "^6.1.1",
     "formik": "^2.4.9",
-    "graphql": "16.13.2",
+    "graphql": "16.14.0",
     "joi": "^18.1.2",
     "monaco-editor": "^0.55.1",
     "next": "16.2.6",
@@ -101,7 +101,7 @@
     "sharp": "^0.34.5",
     "short-uuid": "^6.0.3",
     "slugify": "^1.6.9",
-    "superjson": "2.2.2",
+    "superjson": "2.2.6",
     "symbol-observable": "^4.0.0",
     "three": "^0.183.2",
     "three-stdlib": "^2.36.1",
@@ -116,7 +116,7 @@
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-codegen/typescript-operations": "^4.6.1",
     "@graphql-codegen/typescript-react-apollo": "^4.4.1",
-    "@next/eslint-plugin-next": "^16.2.3",
+    "@next/eslint-plugin-next": "^16.2.6",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@testing-library/dom": "^10.4.1",
@@ -135,45 +135,45 @@
     "@types/three": "^0.173.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^5.2.0",
-    "@vitest/coverage-v8": "^4.1.2",
-    "@vitest/web-worker": "^4.1.2",
+    "@vitest/coverage-v8": "5.0.0-beta.3",
+    "@vitest/web-worker": "5.0.0-beta.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "cross-env": "^10.1.0",
     "dotenv": "^17.4.0",
     "es-guard": "^1.20.0",
     "esbuild": "^0.27.7",
-    "eslint": "^9.39.4",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-testing-library": "^7.16.2",
     "gltfjsx": "^6.5.3",
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "lint-staged": "^15.5.2",
     "minimist": "^1.2.8",
     "next-router-mock": "^1.0.5",
-    "prettier": "3.8.1",
-    "prisma": "7.5.0",
+    "prettier": "3.8.3",
+    "prisma": "7.8.0",
     "raw-loader": "^4.0.2",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "1.90.0",
     "semantic-release": "^25.0.3",
     "tsx": "^4.21.0",
-    "typescript": "5.9.3",
-    "typescript-eslint": "^8.58.0",
-    "vitest": "^4.1.4",
+    "typescript": "6.0.3",
+    "typescript-eslint": "^8.59.4",
+    "vite": "^6.4.2",
+    "vitest": "5.0.0-beta.3",
     "vitest-canvas-mock": "^1.1.4"
   },
   "packageManager": "pnpm@11.1.3+sha512.c85357fe17ca12dd23dd7071822666dfd7e3cb76fe214e3370b5ea2fb34f2a231185509b63e717f3cd0acb38dd3f8d82bcd5e8172400ae678b70ea4fbed0896d",
   "engines": {
     "node": "^v24.11.1"
   },
   "browserslist": [
-    "chrome 64",
-    "edge 79",
-    "firefox 67",
-    "opera 51",
-    "safari 12"
+    "chrome 117",
+    "edge 121",
+    "firefox 121",
+    "safari 17"
   ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -7,3 +7,6 @@ allowBuilds:
   esbuild: true
   prisma: true
   sharp: true
+minimumReleaseAgeExclude:
+  - '@mui/x-charts@9.3.0'
+  - '@mui/x-internal-gestures@9.3.0'
diff --git a/src/entities/dataStructures/array/ui/ArrayStructureView.tsx b/src/entities/dataStructures/array/ui/ArrayStructureView.tsx
@@ -25,10 +25,10 @@ const ArrayBracket: React.FC<ArrayBracketProps> = ({
       <Typography
         component="span"
         className="array-bracket"
-        color="primary.light"
-        fontSize={26}
-        fontWeight={200}
         sx={{
+          color: "primary.light",
+          fontSize: 26,
+          fontWeight: 200,
           display: "inline-block",
           height: 37,
           opacity: 0.6,

diff --git a/src/entities/dataStructures/matrix/ui/MatrixStructureView.tsx b/src/entities/dataStructures/matrix/ui/MatrixStructureView.tsx
@@ -117,7 +117,13 @@ export const MatrixStructureView: React.FC<MatrixStructureViewProps> = ({
             }
 
             return (
-              <Box key={index} component="tr" height={43}>
+              <Box
+                key={index}
+                component="tr"
+                sx={{
+                  height: 43,
+                }}
+              >
                 {header ? <th scope="row">{header}</th> : null}
               </Box>
             );

diff --git a/src/features/appBar/ui/MainAppBar.tsx b/src/features/appBar/ui/MainAppBar.tsx
@@ -227,7 +227,13 @@ export const MainAppBar: React.FC<MainAppBarProps> = ({
                       href={page.href}
                       onClick={handleCloseNavMenu}
                     >
-                      <Typography textAlign="center">{page.name}</Typography>
+                      <Typography
+                        sx={{
+                          textAlign: "center",
+                        }}
+                      >
+                        {page.name}
+                      </Typography>
                     </MenuItem>
                   ))}
                 </Menu>
@@ -277,8 +283,10 @@ export const MainAppBar: React.FC<MainAppBarProps> = ({
             <Stack
               direction="row"
               spacing={isCompact ? 0.5 : 1}
-              alignItems="center"
-              sx={{ flexGrow: 0 }}
+              sx={{
+                alignItems: "center",
+                flexGrow: 0,
+              }}
             >
               {(!useMobilePlayground || currentView !== "browse") && (
                 <Tooltip title={LL.PROJECT_BROWSER()} arrow>

diff --git a/src/features/argsEditor/ui/AddArgumentButton.tsx b/src/features/argsEditor/ui/AddArgumentButton.tsx
@@ -12,7 +12,12 @@ export const AddArgumentButton: React.FC<AddArgumentButtonProps> = ({
   title,
 }) => {
   return (
-    <Box display="flex" justifyContent="center">
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
       <IconButton title={title} onClick={onClick}>
         <Add />
       </IconButton>

diff --git a/src/features/argsEditor/ui/ArgsEditor.tsx b/src/features/argsEditor/ui/ArgsEditor.tsx
@@ -167,7 +167,15 @@ export const ArgsEditor: React.FC<ArgsEditorProps> = ({ selectedCase }) => {
 
   return (
     <Box>
-      <Stack direction="row" spacing={1} alignItems="center" mt={1} mb={2}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: "center",
+          mt: 1,
+          mb: 2,
+        }}
+      >
         <Typography variant="caption">{LL.ARGUMENTS()}</Typography>
         {isLoading && <CircularProgress size={14} />}
         <Divider sx={{ flexGrow: 1 }} />
@@ -187,11 +195,19 @@ export const ArgsEditor: React.FC<ArgsEditorProps> = ({ selectedCase }) => {
             {(provided) => (
               <Stack
                 direction="row"
-                justifyContent="space-between"
-                alignItems="start"
                 spacing={1}
+                sx={{
+                  justifyContent: "space-between",
+                  alignItems: "start",
+                }}
               >
-                <Box display="flex" flexDirection="row" flexGrow={1}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: "row",
+                    flexGrow: 1,
+                  }}
+                >
                   {isEditable && (
                     <Box
                       {...provided.dragHandleProps}
@@ -214,7 +230,13 @@ export const ArgsEditor: React.FC<ArgsEditorProps> = ({ selectedCase }) => {
                   <ArgInput arg={arg} />
                 </Box>
                 {isEditable && (
-                  <Stack direction="row" spacing={1} alignItems="center">
+                  <Stack
+                    direction="row"
+                    spacing={1}
+                    sx={{
+                      alignItems: "center",
+                    }}
+                  >
                     <ArgumentTypeSelect
                       value={arg.type}
                       onChange={(type) => handleArgTypeChange(arg, type)}

diff --git a/src/features/argsEditor/ui/DraggableArgsList.tsx b/src/features/argsEditor/ui/DraggableArgsList.tsx
@@ -24,8 +24,10 @@ export const DraggableArgsList: React.FC<DraggableArgsListProps> = ({
           <Stack
             {...provided.droppableProps}
             ref={provided.innerRef}
-            mt={1}
             spacing={1}
+            sx={{
+              mt: 1,
+            }}
           >
             {children}
             {provided.placeholder}

diff --git a/src/features/benchmark/ui/BenchmarkView.tsx b/src/features/benchmark/ui/BenchmarkView.tsx
@@ -23,10 +23,20 @@ const StatChip: React.FC<{
         backgroundColor: theme.palette.action.hover,
       }}
     >
-      <Typography variant="caption" color="text.secondary">
+      <Typography
+        variant="caption"
+        sx={{
+          color: "text.secondary",
+        }}
+      >
         {label}
       </Typography>
-      <Typography variant="caption" fontWeight={600}>
+      <Typography
+        variant="caption"
+        sx={{
+          fontWeight: 600,
+        }}
+      >
         {value != null ? `${value.toFixed(2)} ms` : "—"}
       </Typography>
     </Box>
@@ -43,7 +53,14 @@ export const BenchmarkView = () => {
         md: 2,
       }}
     >
-      <Stack direction="row" flexWrap="wrap" gap={1} useFlexGap>
+      <Stack
+        direction="row"
+        useFlexGap
+        sx={{
+          flexWrap: "wrap",
+          gap: 1,
+        }}
+      >
         <StatChip label="Avg" value={benchmarkResults?.averageTime} />
         <StatChip label="Med" value={benchmarkResults?.medianTime} />
         <StatChip label="P75" value={benchmarkResults?.p75Time} />

diff --git a/src/features/callstack/ui/CallstackTable.tsx b/src/features/callstack/ui/CallstackTable.tsx
@@ -74,7 +74,12 @@ export const CallstackTable: React.FC = () => {
 
   if (!callstack.isReady) {
     return (
-      <Box p={2} textAlign="center">
+      <Box
+        sx={{
+          p: 2,
+          textAlign: "center",
+        }}
+      >
         Here you will see a table of runtime actions once the code is executed!
       </Box>
     );

diff --git a/src/features/callstack/ui/CompactCallstackList.tsx b/src/features/callstack/ui/CompactCallstackList.tsx
@@ -186,8 +186,11 @@ export const CompactCallstackList: React.FC<CompactCallstackListProps> = ({
                         <Stack
                           direction="row"
                           spacing={0.5}
-                          alignItems="center"
-                          sx={{ minWidth: 0, whiteSpace: "nowrap" }}
+                          sx={{
+                            alignItems: "center",
+                            minWidth: 0,
+                            whiteSpace: "nowrap",
+                          }}
                         >
                           <Typography component="span" variant="inherit">
                             L:

diff --git a/src/features/codeRunner/hooks/useJSWorker.ts b/src/features/codeRunner/hooks/useJSWorker.ts
@@ -5,10 +5,7 @@ export const useJSWorker = () => {
 
   useEffect(() => {
     const worker = new Worker(
-      new URL(
-        "src/features/codeRunner/lib/workers/codeExec.worker.ts",
-        import.meta.url,
-      ),
+      new URL("../lib/workers/codeExec.worker.ts", import.meta.url),
     );
     // eslint-disable-next-line react-hooks/set-state-in-effect
     setWorker(worker);

diff --git a/src/features/codeRunner/lib/javascriptFormatRunner.ts b/src/features/codeRunner/lib/javascriptFormatRunner.ts
@@ -14,10 +14,7 @@ export type JavaScriptFormatResult = {
 
 function createDefaultWorker(): Worker {
   return new Worker(
-    new URL(
-      "src/features/codeRunner/lib/workers/prettierFormat.worker.ts",
-      import.meta.url,
-    ),
+    new URL("./workers/prettierFormat.worker.ts", import.meta.url),
   );
 }
 

diff --git a/src/features/codeRunner/lib/pythonRunner.ts b/src/features/codeRunner/lib/pythonRunner.ts
@@ -17,10 +17,7 @@ export type PythonFormatResult = {
 
 function createWorker(): Worker {
   return new Worker(
-    new URL(
-      "src/features/codeRunner/lib/workers/pythonExec.worker.ts",
-      import.meta.url,
-    ),
+    new URL("./workers/pythonExec.worker.ts", import.meta.url),
   );
 }