@wandelbots/wandelbots-js-react-components 5.4.1 → 5.4.2-pr.ci-pr-preview.586.f684aae

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "5.4.1",
+  "version": "5.4.2-pr.ci-pr-preview.586.f684aae",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -51,6 +51,8 @@
     "ci:test:runner": "wait-on tcp:127.0.0.1:9009 && test-storybook --url http://127.0.0.1:9009 --index-json --browsers chromium",
     "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
     "build-storybook": "storybook build",
+    "lint": "biome check --error-on-warnings .",
+    "format": "biome format . --write",
     "prepare": "husky || true",
     "td": "tsx scripts/td-wrapper.ts"
   },
@@ -69,6 +71,7 @@
     "node": ">=18.14.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.4.13",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^7.3.7",
@@ -94,7 +97,6 @@
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^10.1.10",
     "glob": "^13.0.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -106,7 +108,6 @@
     "npm-run-all": "^4.1.5",
     "playwright": "^1.59.1",
     "postcss": "^8.5.3",
-    "prettier-eslint": "^16.3.0",
     "prop-types": "^15.8.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/3d.ts

@@ -8,11 +8,11 @@ export * from "./components/robots/AxisConfig"
 export * from "./components/robots/LinearAxis"
 export {
   extractManufacturer,
-  getDefaultHomeConfig, MANUFACTURER_HOME_CONFIGS
+  getDefaultHomeConfig,
+  MANUFACTURER_HOME_CONFIGS,
 } from "./components/robots/manufacturerHomePositions"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedLinearAxis"
 export * from "./components/robots/SupportedRobot"
 export * from "./components/robots/MotionGroupVisualizer"
-

package/src/Setup.tsx

@@ -1,6 +1,6 @@
 import { OrbitControls } from "@react-three/drei"
 import { Canvas, type CanvasProps } from "@react-three/fiber"
-import * as React from "react"
+import type * as React from "react"
 import { Vector3 } from "three"
 import { PresetEnvironment } from "./components/3d-viewport/PresetEnvironment"
 
@@ -27,11 +27,7 @@ export const Setup = ({
     {...restProps}
   >
     {children}
-    {lights && (
-      <>
-        <PresetEnvironment />
-      </>
-    )}
+    {lights && <PresetEnvironment />}
     {controls && <OrbitControls makeDefault />}
   </Canvas>
 )

package/src/components/3d-viewport/PresetEnvironment.tsx

@@ -27,6 +27,7 @@ function Lightformers({ positions = [2, 0, 2, 0, 2, 0, 2, 0] }) {
         <group>
           {positions.map((x, i) => (
             <Lightformer
+              // biome-ignore lint/suspicious/noArrayIndexKey: pre-biome code
               key={i}
               form="circle"
               intensity={5}

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -1,19 +1,23 @@
+import type { ThreeElements } from "@react-three/fiber"
 import { useMemo } from "react"
-import { type ThreeElements } from "@react-three/fiber"
 import * as THREE from "three"
 import { ConvexGeometry, RoundedBoxGeometry } from "three-stdlib"
 
 import type {
+  Capsule,
   Collider,
   ConvexHull,
   DHParameter,
   MotionGroupDescription,
-  Sphere,
-  Capsule,
   RectangularCapsule,
+  Sphere,
 } from "@wandelbots/nova-js/v2"
 
-import { dhParametersToPlaneSize, orientationToQuaternion, verticesToCoplanarity } from "../utils/converters"
+import {
+  dhParametersToPlaneSize,
+  orientationToQuaternion,
+  verticesToCoplanarity,
+} from "../utils/converters"
 
 export type SafetyZonesRendererProps = {
   safetyZones: MotionGroupDescription["safety_zones"]
@@ -21,10 +25,10 @@ export type SafetyZonesRendererProps = {
 } & ThreeElements["group"]
 
 export function SafetyZonesRenderer({
-                                      safetyZones,
-                                      dhParameters,
-                                      ...props
-                                    }: SafetyZonesRendererProps) {
+  safetyZones,
+  dhParameters,
+  ...props
+}: SafetyZonesRendererProps) {
   /**
    * Common material properties for safety zone meshes
    */
@@ -54,14 +58,23 @@ export function SafetyZonesRenderer({
       return null
     }
 
-    const position = new THREE.Vector3(zone.pose.position[0] / 1000, zone.pose.position[1] / 1000, zone.pose.position[2] / 1000)
-    const orientation = new THREE.Vector3(zone.pose.orientation[0], zone.pose.orientation[1], zone.pose.orientation[2])
+    const position = new THREE.Vector3(
+      zone.pose.position[0] / 1000,
+      zone.pose.position[1] / 1000,
+      zone.pose.position[2] / 1000,
+    )
+    const orientation = new THREE.Vector3(
+      zone.pose.orientation[0],
+      zone.pose.orientation[1],
+      zone.pose.orientation[2],
+    )
 
     let geometry: React.ReactElement | null
 
-    const materialProps = zone.shape.shape_type === "plane"
-      ? { ...safetyZoneMaterialProps, side: THREE.DoubleSide }
-      : { ...safetyZoneMaterialProps, side: THREE.FrontSide }
+    const materialProps =
+      zone.shape.shape_type === "plane"
+        ? { ...safetyZoneMaterialProps, side: THREE.DoubleSide }
+        : { ...safetyZoneMaterialProps, side: THREE.FrontSide }
 
     switch (zone.shape.shape_type) {
       /**
@@ -109,7 +122,12 @@ export function SafetyZonesRenderer({
           vertices.push(newVertex)
         }
         try {
-          geometry = <primitive object={new ConvexGeometry(vertices)} attach="geometry" />
+          geometry = (
+            <primitive
+              object={new ConvexGeometry(vertices)}
+              attach="geometry"
+            />
+          )
         } catch (error) {
           console.log("Error creating ConvexGeometry:", error)
           return null
@@ -141,7 +159,10 @@ export function SafetyZonesRenderer({
       }
 
       default: {
-        console.warn("Unsupported safety zone shape type:", zone.shape.shape_type)
+        console.warn(
+          "Unsupported safety zone shape type:",
+          zone.shape.shape_type,
+        )
         geometry = null
       }
     }
@@ -162,15 +183,14 @@ export function SafetyZonesRenderer({
   /**
    * Helper variable render safety zones
    */
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
   const renderedSafetyZones = useMemo(() => {
-    return Object.values(safetyZones ?? {}).map((zone: Collider, index: number) => {
-      return renderMesh(index, zone)
-    })
+    return Object.values(safetyZones ?? {}).map(
+      (zone: Collider, index: number) => {
+        return renderMesh(index, zone)
+      },
+    )
   }, [safetyZones, planeSize])
 
-  return (
-    <group {...props}>
-      {renderedSafetyZones}
-    </group>
-  )
+  return <group {...props}>{renderedSafetyZones}</group>
 }

package/src/components/3d-viewport/TrajectoryRenderer.tsx

@@ -15,7 +15,7 @@ export function TrajectoryRenderer({
       ?.map((pose: Pose) => {
         if (pose.position && pose.position.length >= 3) {
           const [x, y, z] = pose.position
-          if (isFinite(x) && isFinite(y) && isFinite(z)) {
+          if (Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(z)) {
             return new THREE.Vector3(x / 1000, z / 1000, -y / 1000)
           }
         }

package/src/components/3d-viewport/collider/ColliderCollection.tsx

@@ -26,8 +26,9 @@ export default function ColliderCollection({
           key={colliderKey}
           name={colliderKey}
           collider={collider}
-          children={meshChildrenProvider(colliderKey, collider)}
-        />
+        >
+          {meshChildrenProvider(colliderKey, collider)}
+        </ColliderElement>
       ))}
     </group>
   )

package/src/components/AppHeader.tsx

@@ -1,15 +1,12 @@
-import {
-  alpha,
-  AppBar,
-  Backdrop,
-  Box,
-  IconButton,
-  Menu,
-  MenuItem,
-  type SxProps,
-  Toolbar,
-  Typography,
-} from "@mui/material"
+import { alpha, type SxProps } from "@mui/material/styles"
+import AppBar from "@mui/material/AppBar"
+import Backdrop from "@mui/material/Backdrop"
+import Box from "@mui/material/Box"
+import IconButton from "@mui/material/IconButton"
+import Menu from "@mui/material/Menu"
+import MenuItem from "@mui/material/MenuItem"
+import Toolbar from "@mui/material/Toolbar"
+import Typography from "@mui/material/Typography"
 import { observer } from "mobx-react-lite"
 import { type MouseEvent, type ReactNode, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"

package/src/components/ConsoleFilter.tsx

@@ -20,5 +20,5 @@ export default function ConsoleFilter() {
     }
   }, [])
 
-  return <></>
+  return null
 }

package/src/components/CopyableText.tsx

@@ -1,4 +1,7 @@
-import { Stack, Tooltip, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Stack from "@mui/material/Stack"
+import Tooltip from "@mui/material/Tooltip"
+import Typography from "@mui/material/Typography"
 import { useEffect, useState } from "react"
 
 export const CopyableText = (props: {

package/src/components/CycleTimer/DefaultVariant.tsx

@@ -1,4 +1,7 @@
-import { Box, Fade, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Fade from "@mui/material/Fade"
+import Typography from "@mui/material/Typography"
 import { Gauge } from "@mui/x-charts/Gauge"
 import { useTranslation } from "react-i18next"
 import type { AnimationState, TimerState } from "./types"
@@ -57,23 +60,23 @@ export const DefaultVariant = ({
         sx={{
           opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
           transition: "opacity 0.5s ease-out",
-          [`& .MuiGauge-valueArc`]: {
+          "& .MuiGauge-valueArc": {
             fill: hasError
               ? theme.palette.error.light
               : theme.palette.success.main,
             transition: "fill 0.5s ease-out",
           },
-          [`& .MuiGauge-referenceArc`]: {
+          "& .MuiGauge-referenceArc": {
             fill: currentState === "idle" ? "#171927" : "#171927",
             stroke: "transparent",
             strokeWidth: 0,
             transition:
               "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
           },
-          [`& .MuiGauge-valueText`]: {
+          "& .MuiGauge-valueText": {
             display: "none",
           },
-          [`& .MuiGauge-text`]: {
+          "& .MuiGauge-text": {
             display: "none",
           },
         }}

package/src/components/CycleTimer/SmallVariant.tsx

@@ -1,4 +1,6 @@
-import { Box, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Typography from "@mui/material/Typography"
 import { useTranslation } from "react-i18next"
 import type { AnimationState, TimerState } from "./types"
 import { formatTimeLocalized } from "./utils"

package/src/components/DataGrid.tsx

@@ -1,7 +1,10 @@
 import ClearIcon from "@mui/icons-material/Clear"
 import FilterListIcon from "@mui/icons-material/FilterList"
 import SearchIcon from "@mui/icons-material/Search"
-import { Box, Divider, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Divider from "@mui/material/Divider"
+import Typography from "@mui/material/Typography"
 import {
   DataGrid,
   type DataGridProps,

package/src/components/LoadingCover.tsx

@@ -1,4 +1,7 @@
-import { capitalize, CircularProgress, Stack, useTheme } from "@mui/material"
+import CircularProgress from "@mui/material/CircularProgress"
+import Stack from "@mui/material/Stack"
+import { useTheme } from "@mui/material/styles"
+import { capitalize } from "@mui/material/utils"
 import { lowerFirst } from "lodash-es"
 import { useEffect, useState } from "react"
 import { makeErrorMessage } from "./utils/errorHandling"

package/src/components/LogPanel.tsx

@@ -1,4 +1,4 @@
-import type { SxProps } from "@mui/material"
+import type { SxProps } from "@mui/material/styles"
 import { observer } from "mobx-react-lite"
 import { useEffect, useMemo, useRef } from "react"
 import { externalizeComponent } from "../externalizeComponent"

package/src/components/LogViewer.tsx

@@ -1,18 +1,14 @@
-import {
-  ContentCopy,
-  DescriptionOutlined as DocumentIcon,
-  ExpandLess,
-  ExpandMore,
-} from "@mui/icons-material"
-import type { SxProps } from "@mui/material"
-import {
-  Box,
-  Button,
-  IconButton,
-  Paper,
-  Typography,
-  useTheme,
-} from "@mui/material"
+import ContentCopy from "@mui/icons-material/ContentCopy"
+import DocumentIcon from "@mui/icons-material/DescriptionOutlined"
+import ExpandLess from "@mui/icons-material/ExpandLess"
+import ExpandMore from "@mui/icons-material/ExpandMore"
+import type { SxProps } from "@mui/material/styles"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import IconButton from "@mui/material/IconButton"
+import Paper from "@mui/material/Paper"
+import Typography from "@mui/material/Typography"
 import { observer } from "mobx-react-lite"
 import { useEffect, useRef, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
@@ -146,7 +142,7 @@ export const LogViewer = externalizeComponent(
 
       const displayMessage =
         isLongMessage && !isExpanded
-          ? message.message.substring(0, 150) + "..."
+          ? `${message.message.substring(0, 150)}...`
           : message.message
 
       return (
@@ -310,7 +306,7 @@ export const LogViewer = externalizeComponent(
               minWidth: "auto",
               padding: "4px 8px",
               "&:hover": {
-                backgroundColor: theme.palette.primary.main + "14", // 8% opacity
+                backgroundColor: `${theme.palette.primary.main}14`, // 8% opacity
               },
             }}
           >

package/src/components/ProgramControl.tsx

@@ -1,5 +1,10 @@
-import { Pause, PlayArrow, Stop } from "@mui/icons-material"
-import { Box, Button, Typography, useTheme } from "@mui/material"
+import Pause from "@mui/icons-material/Pause"
+import PlayArrow from "@mui/icons-material/PlayArrow"
+import Stop from "@mui/icons-material/Stop"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import Typography from "@mui/material/Typography"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"

package/src/components/ProgramStateIndicator.tsx

@@ -1,4 +1,6 @@
-import { Chip, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Chip from "@mui/material/Chip"
+import Typography from "@mui/material/Typography"
 import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
@@ -124,7 +126,6 @@ export const ProgramStateIndicator = externalizeComponent(
                 label: t("ProgramStateIndicator.Error.lb"),
                 color: theme.palette.error.main,
               }
-            case ProgramState.IDLE:
             default:
               return {
                 label: t("ProgramStateIndicator.Ready.lb"),

package/src/components/RobotCard.tsx

@@ -1,4 +1,9 @@
-import { Box, Button, Card, Divider, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import Card from "@mui/material/Card"
+import Divider from "@mui/material/Divider"
+import Typography from "@mui/material/Typography"
 import { Bounds } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
 import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"

package/src/components/RobotListItem.tsx

@@ -1,5 +1,8 @@
 import ErrorIcon from "@mui/icons-material/Error"
-import { Box, Divider, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Divider from "@mui/material/Divider"
+import Typography from "@mui/material/Typography"
 import { observer } from "mobx-react-lite"
 import type { ComponentType } from "react"
 import { externalizeComponent } from "../externalizeComponent"

package/src/components/RobotSetupReadinessIndicator.tsx

@@ -1,4 +1,7 @@
-import { Box, Chip, Typography, useTheme } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import Box from "@mui/material/Box"
+import Chip from "@mui/material/Chip"
+import Typography from "@mui/material/Typography"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
@@ -91,7 +94,6 @@ export const RobotSetupReadinessIndicator = externalizeComponent(
               theme.palette.background.paper,
             textColor: theme.palette.secondary.contrastText,
           }
-        case RobotSetupReadinessState.PRECONDITION_NOT_FULFILLED:
         default:
           return {
             label: t(

package/src/components/SelectableFab.tsx

@@ -1,5 +1,5 @@
-import { Fab, type FabProps, styled } from "@mui/material"
-
+import { styled } from "@mui/material/styles"
+import Fab, { type FabProps } from "@mui/material/Fab"
 const StyledSelectableFab = styled(Fab, {
   shouldForwardProp: (prop) => prop !== "selected",
 })<CodeFabProps>(({ theme }) => ({

package/src/components/TabBar.tsx

@@ -1,5 +1,8 @@
-import type { SxProps } from "@mui/material"
-import { Badge, Box, Tab, Tabs } from "@mui/material"
+import type { SxProps } from "@mui/material/styles"
+import Badge from "@mui/material/Badge"
+import Box from "@mui/material/Box"
+import Tab from "@mui/material/Tab"
+import Tabs from "@mui/material/Tabs"
 import { observer } from "mobx-react-lite"
 import { useEffect, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
@@ -76,7 +79,7 @@ function TabPanel(props: TabPanelProps) {
  */
 interface TabWrapperProps {
   children: React.ReactNode
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
   [key: string]: any
 }
 
@@ -117,6 +120,7 @@ export const TabBar = externalizeComponent(
     const [uncontrolledActiveTab, setUncontrolledActiveTab] =
       useState(defaultActiveTab)
 
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
     const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
 
     // Keep uncontrolled state in range when items change

package/src/components/ThemeSelect.tsx

@@ -1,6 +1,7 @@
 // TODO implement this as part of theme?
 
-import { Select, useTheme, type SxProps } from "@mui/material"
+import { useTheme, type SxProps } from "@mui/material/styles"
+import Select from "@mui/material/Select"
 import defaultsDeep from "lodash-es/defaultsDeep"
 
 type ThemeSelectProps = {

package/src/components/Timer/TimerDefaultVariant.tsx

@@ -1,4 +1,6 @@
-import { Box, Fade, Typography } from "@mui/material"
+import Box from "@mui/material/Box"
+import Fade from "@mui/material/Fade"
+import Typography from "@mui/material/Typography"
 import { Gauge } from "@mui/x-charts"
 import { useTheme } from "@mui/material/styles"
 import { useTranslation } from "react-i18next"
@@ -21,7 +23,8 @@ export const TimerDefaultVariant = ({
   const { t } = useTranslation()
   const theme = useTheme()
   const { elapsedTime, currentProgress } = timerState
-  const { showErrorAnimation, showPauseAnimation, showMainText } = animationState
+  const { showErrorAnimation, showPauseAnimation, showMainText } =
+    animationState
 
   return (
     <Box
@@ -49,23 +52,23 @@ export const TimerDefaultVariant = ({
         sx={{
           opacity: showPauseAnimation || showErrorAnimation ? 0.6 : 1,
           transition: "opacity 0.5s ease-out",
-          [`& .MuiGauge-valueArc`]: {
+          "& .MuiGauge-valueArc": {
             fill: hasError
               ? theme.palette.error.light
               : theme.palette.success.main,
             transition: "fill 0.5s ease-out",
           },
-          [`& .MuiGauge-referenceArc`]: {
+          "& .MuiGauge-referenceArc": {
             fill: "#171927",
             stroke: "transparent",
             strokeWidth: 0,
             transition:
               "fill 0.5s ease-out, stroke 0.5s ease-out, stroke-width 0.5s ease-out",
           },
-          [`& .MuiGauge-valueText`]: {
+          "& .MuiGauge-valueText": {
             display: "none",
           },
-          [`& .MuiGauge-text`]: {
+          "& .MuiGauge-text": {
             display: "none",
           },
         }}

package/src/components/Timer/TimerSmallVariant.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography } from "@mui/material"
+import Box from "@mui/material/Box"
+import Typography from "@mui/material/Typography"
 import { useTheme } from "@mui/material/styles"
 import { useTranslation } from "react-i18next"
 import type { TimerAnimationState, TimerState } from "./types"

package/src/components/Timer/useTimerLogic.ts

@@ -67,10 +67,11 @@ export const useTimerLogic = ({
   const pause = useCallback(() => {
     if (startTimeRef.current && timerState.isRunning) {
       const now = Date.now()
-      const totalElapsed = (now - startTimeRef.current) / 1000 + pausedTimeRef.current
+      const totalElapsed =
+        (now - startTimeRef.current) / 1000 + pausedTimeRef.current
       const currentProgress = ((totalElapsed / 60) % 1) * 100
       progressInterpolator.setTarget([currentProgress])
-      
+
       setTimerState((prev) => ({
         ...prev,
         elapsedTime: Math.floor(totalElapsed),
@@ -83,11 +84,7 @@ export const useTimerLogic = ({
       isPausedState: true,
     }))
     onPauseAnimation()
-  }, [
-    timerState.isRunning,
-    progressInterpolator,
-    onPauseAnimation,
-  ])
+  }, [timerState.isRunning, progressInterpolator, onPauseAnimation])
 
   const resume = useCallback(() => {
     if (timerState.isPausedState) {
@@ -150,7 +147,8 @@ export const useTimerLogic = ({
       const updateTimer = () => {
         if (startTimeRef.current) {
           const now = Date.now()
-          const totalElapsed = (now - startTimeRef.current) / 1000 + pausedTimeRef.current
+          const totalElapsed =
+            (now - startTimeRef.current) / 1000 + pausedTimeRef.current
           const currentProgress = ((totalElapsed / 60) % 1) * 100
 
           setTimerState((prev) => ({
@@ -159,7 +157,9 @@ export const useTimerLogic = ({
           }))
 
           // Only update progress interpolator if progress changed significantly
-          const progressDiff = Math.abs(currentProgress - lastProgressRef.current)
+          const progressDiff = Math.abs(
+            currentProgress - lastProgressRef.current,
+          )
           if (progressDiff > 0.1) {
             progressInterpolator.setTarget([currentProgress])
             lastProgressRef.current = currentProgress

package/src/components/TransparentOverlay.tsx

@@ -1,6 +1,6 @@
-import { Stack } from "@mui/material"
+import Stack from "@mui/material/Stack"
 import { omit } from "lodash-es"
-import React from "react"
+import type React from "react"
 
 export const TransparentOverlay = (
   props: React.ComponentProps<typeof Stack>,

package/src/components/VelocitySlider.tsx

@@ -1,4 +1,6 @@
-import { Stack, Typography, useTheme, type SxProps } from "@mui/material"
+import { useTheme, type SxProps } from "@mui/material/styles"
+import Stack from "@mui/material/Stack"
+import Typography from "@mui/material/Typography"
 import Slider from "@mui/material/Slider"
 import isNumber from "lodash-es/isNumber"
 import { observer } from "mobx-react-lite"