@wandelbots/wandelbots-js-react-components 3.4.0-pr.feat-add-yaskawa-gp200s.438.0503e4b → 3.4.0-pr.feat-yaskawa-gp200s.437.1b5737e

package/dist/wandelscript.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-Dj7TBCkF.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
+//# sourceMappingURL=wandelscript.cjs.js.map

package/dist/wandelscript.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wandelscript.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/wandelscript.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/wandelscript-editor/WandelscriptEditor";
+//# sourceMappingURL=wandelscript.d.ts.map

package/dist/wandelscript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wandelscript.d.ts","sourceRoot":"","sources":["../src/wandelscript.ts"],"names":[],"mappings":"AACA,cAAc,qDAAqD,CAAA"}

package/dist/wandelscript.es.js

@@ -0,0 +1,5 @@
+import { W as t } from "./WandelscriptEditor-DnJvITTA.js";
+export {
+  t as WandelscriptEditor
+};
+//# sourceMappingURL=wandelscript.es.js.map

package/dist/wandelscript.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wandelscript.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "3.4.0-pr.feat-add-yaskawa-gp200s.438.0503e4b",
+  "version": "3.4.0-pr.feat-yaskawa-gp200s.437.1b5737e",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -13,8 +13,24 @@
   "main": "./dist/index.cjs",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.es.js",
+      "require": "./dist/core.cjs.js"
+    },
+    "./3d": {
+      "types": "./dist/3d.d.ts",
+      "import": "./dist/3d.es.js",
+      "require": "./dist/3d.cjs.js"
+    },
+    "./wandelscript": {
+      "types": "./dist/wandelscript.d.ts",
+      "import": "./dist/wandelscript.es.js",
+      "require": "./dist/wandelscript.cjs.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -50,17 +66,19 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^7.1.1",
     "@mui/material": "^7.1.1",
     "@react-three/drei": "^10.2.0",
     "@react-three/fiber": "^9.1.2",
-    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-docs": "^10.0.1",
-    "@storybook/react-vite": "^10.0.1",
+    "@shikijs/monaco": "^3.1.0",
+    "@storybook/addon-docs": "^10.1.7",
+    "@storybook/react-vite": "^10.1.10",
     "@storybook/test-runner": "^0.24.1",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -68,19 +86,19 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.1.8",
-    "@types/three": "^0.174.0",
+    "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^2.1.0",
+    "@wandelbots/nova-js": "3.3.1",
     "add": "^2.0.6",
-    "eslint-plugin-storybook": "^10.0.1",
-    "glob": "^11.0.1",
+    "eslint-plugin-storybook": "^10.1.10",
+    "glob": "^13.0.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "i18next": "^25.2.1",
     "jest-simple-dot-reporter": "^1.0.5",
     "jest-summary-reporter": "^0.0.2",
-    "jsdom": "^26.1.0",
-    "monaco-editor": "^0.52.2",
+    "jsdom": "^27.4.0",
+    "monaco-editor": "^0.55.1",
     "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.5.3",
@@ -95,9 +113,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.2.3",
-    "storybook": "^10.0.1",
+    "shiki": "^3.1.0",
+    "storybook": "^10.1.11",
     "storybook-preset-inline-svg": "^1.0.1",
-    "three": "^0.174.0",
+    "three": "^0.182.0",
     "three-stdlib": "^2.35.14",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.8.2",
@@ -105,24 +124,36 @@
     "vite": "^6.2.0",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.7",
-    "wait-on": "^8.0.2"
+    "wait-on": "^9.0.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/icons-material": "^6 || ^7",
     "@mui/material": "^6 || ^7",
     "@react-three/drei": "^9.122.0 || ^10",
     "@react-three/fiber": "^8 || ^9",
+    "@shikijs/monaco": "^3.1.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "three": ">=0.174",
+    "shiki": "^3.1.0",
+    "three": ">=0.182",
     "three-stdlib": ">=2"
   },
   "peerDependenciesMeta": {
     "react-dom": {
       "optional": true
     },
+    "@monaco-editor/react": {
+      "optional": true
+    },
+    "@shikijs/monaco": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
     "@react-three/drei": {
       "optional": true
     },
@@ -137,17 +168,14 @@
     }
   },
   "dependencies": {
-    "@monaco-editor/react": "^4.7.0",
     "@mui/x-charts": "^8.9.0",
-    "@mui/x-data-grid": "^8.10.1",
-    "@shikijs/monaco": "^3.1.0",
+    "@mui/x-data-grid": "^8.23.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
     "react-error-boundary": "^6.0.0",
-    "react-i18next": "^15.5.2",
-    "shiki": "^3.1.0"
+    "react-i18next": "^15.5.2"
   },
   "overrides": {
     "storybook": "$storybook"

package/src/3d.ts

@@ -0,0 +1,15 @@
+// 3D viewport and Three.js-based components
+export { default as CollisionSceneRenderer } from "./components/3d-viewport/collider/CollisionSceneRenderer"
+export * from "./components/3d-viewport/PresetEnvironment"
+export * from "./components/3d-viewport/SafetyZonesRenderer"
+export * from "./components/3d-viewport/TrajectoryRenderer"
+export * from "./components/RobotCard"
+export * from "./components/robots/AxisConfig"
+export {
+  MANUFACTURER_HOME_CONFIGS,
+  extractManufacturer,
+  getDefaultHomeConfig,
+} from "./components/robots/manufacturerHomePositions"
+export * from "./components/robots/Robot"
+export { defaultGetModel } from "./components/robots/robotModelLogic"
+export * from "./components/robots/SupportedRobot"

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

@@ -1,4 +1,4 @@
-import type { CoordinateSystem } from "@wandelbots/nova-api/v1"
+import type { CoordinateSystem } from "@wandelbots/nova-js/v1"
 import type { ReactNode } from "react"
 import { Quaternion, Vector3 } from "three"
 

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

@@ -1,6 +1,5 @@
 import { type ThreeElements } from "@react-three/fiber"
-import type { Geometry } from "@wandelbots/nova-api/v1"
-import type { SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
+import type { Geometry, SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 

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

@@ -1,5 +1,5 @@
 import type { ThreeElements } from "@react-three/fiber"
-import type { Collider } from "@wandelbots/nova-api/v1"
+import type { Collider } from "@wandelbots/nova-js/v1"
 import ColliderElement from "./ColliderElement"
 
 export type MeshChildrenProvider = (

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

@@ -1,4 +1,4 @@
-import type { Collider } from "@wandelbots/nova-api/v1"
+import type { Collider } from "@wandelbots/nova-js/v1"
 import type React from "react"
 import * as THREE from "three"
 import { colliderShapeToBufferGeometry } from "./colliderShapeToBufferGeometry"

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

@@ -1,4 +1,4 @@
-import type { CollisionScene } from "@wandelbots/nova-api/v1"
+import type { CollisionScene } from "@wandelbots/nova-js/v1"
 import ColliderCollection, {
   type MeshChildrenProvider,
 } from "./ColliderCollection"

package/src/components/3d-viewport/collider/colliderShapeToBufferGeometry.ts

@@ -1,4 +1,4 @@
-import type { ColliderShape } from "@wandelbots/nova-api/v1"
+import type { ColliderShape } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 

package/src/components/AppHeader.md

@@ -16,7 +16,7 @@ A navigation header component that displays the current application's icon and n
 import {
   AppHeader,
   type AppItem,
-} from "@wandelbots/wandelbots-js-react-components"
+} from "@wandelbots/wandelbots-js-react-components/core"
 import { Home, Settings, Person } from "@mui/icons-material"
 
 const apps: AppItem[] = [

package/src/components/ProgramStateIndicator.tsx

@@ -1,8 +1,5 @@
 import { Chip, Typography, useTheme } from "@mui/material"
-import type {
-  RobotControllerStateOperationModeEnum,
-  RobotControllerStateSafetyStateEnum,
-} from "@wandelbots/nova-js/v1"
+import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
@@ -12,9 +9,9 @@ export interface ProgramStateIndicatorProps {
   /** The current state of the program */
   programState: ProgramState
   /** The current safety state of the robot controller */
-  safetyState: RobotControllerStateSafetyStateEnum
+  safetyState: SafetyStateType
   /** The current operation mode of the robot controller */
-  operationMode: RobotControllerStateOperationModeEnum
+  operationMode: OperationMode
   /** Additional CSS class name */
   className?: string
 }

package/src/components/RobotCard.tsx

@@ -1,16 +1,13 @@
 import { Box, Button, Card, Divider, Typography, useTheme } from "@mui/material"
 import { Bounds } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
-import type {
-  ConnectedMotionGroup,
-  RobotControllerStateOperationModeEnum,
-  RobotControllerStateSafetyStateEnum,
-} from "@wandelbots/nova-js/v1"
+import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import type { Group } from "three"
 import { externalizeComponent } from "../externalizeComponent"
+import type { ConnectedMotionGroup } from "../lib/ConnectedMotionGroup"
 import { PresetEnvironment } from "./3d-viewport/PresetEnvironment"
 import type { ProgramState } from "./ProgramControl"
 import { ProgramStateIndicator } from "./ProgramStateIndicator"
@@ -22,9 +19,9 @@ export interface RobotCardProps {
   /** Current program state */
   programState: ProgramState
   /** Current safety state of the robot controller */
-  safetyState: RobotControllerStateSafetyStateEnum
+  safetyState: SafetyStateType
   /** Current operation mode of the robot controller */
-  operationMode: RobotControllerStateOperationModeEnum
+  operationMode: OperationMode
   /** Whether the "Drive to Home" button should be enabled */
   driveToHomeEnabled?: boolean
   /** Callback fired when "Drive to Home" button is pressed */

package/src/components/jogging/JoggingBlocked.tsx

@@ -0,0 +1,37 @@
+import { Alert, AlertTitle, Backdrop, Button, Stack } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { type JoggingStore } from "./JoggingStore"
+
+export const JoggingBlocked = observer(({ store }: { store: JoggingStore }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Backdrop
+      open={true}
+      sx={{
+        position: "absolute",
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        color: "#fff",
+        background: "rgba(15, 15, 15, 0.88)",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+      }}
+    >
+      <Stack sx={{ m: 2, width: "100%" }}>
+        <Alert severity="error" sx={{ mb: 2 }}>
+          <AlertTitle>{t("Jogging.Blocked.ti")}</AlertTitle>
+          {t("Jogging.Blocked.lb")}
+        </Alert>
+
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => store.unblock()}
+        >
+          {t("Jogging.Blocked.Reenable.bt")}
+        </Button>
+      </Stack>
+    </Backdrop>
+  )
+})

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -6,13 +6,18 @@ import {
   useTheme,
   type Theme,
 } from "@mui/material"
-import { degreesToRadians, radiansToDegrees } from "@wandelbots/nova-js"
+import {
+  degreesToRadians,
+  radiansToDegrees,
+  XYZ_TO_VECTOR,
+} from "@wandelbots/nova-js"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
 import ZAxisIcon from "../../icons/axis-z.svg"
 import RotationIcon from "../../icons/rotation.svg"
+import type { Vector3Simple } from "../../lib/JoggerConnection"
 import { useReaction } from "../utils/hooks"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
@@ -56,7 +61,7 @@ export const JoggingCartesianTab = observer(
       () => {
         store.jogger.motionStream.motionStateSocket.changeUrl(
           store.jogger.nova.makeWebsocketURL(
-            `/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}&response_coordinate_system=${store.selectedCoordSystemId}`,
+            `/controllers/${store.jogger.motionStream.controllerId}/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}`,
           ),
         )
       },
@@ -70,8 +75,8 @@ export const JoggingCartesianTab = observer(
       const jogger = await store.activate()
 
       const tcpPose = jogger.motionStream.rapidlyChangingMotionState.tcp_pose
-      const jointPosition =
-        jogger.motionStream.rapidlyChangingMotionState.state.joint_position
+      const jointPosition = jogger.motionStream.rapidlyChangingMotionState
+        .joint_position as Vector3Simple
       if (!tcpPose) return
 
       await store.withMotionLock(async () => {
@@ -117,13 +122,13 @@ export const JoggingCartesianTab = observer(
       }
 
       if (opts.motionType === "translate") {
-        await store.jogger.startTCPTranslation({
+        await store.jogger.translateTCP({
           axis: opts.axis,
           direction: opts.direction,
           velocityMmPerSec: store.translationVelocityMmPerSec,
         })
       } else {
-        await store.jogger.startTCPRotation({
+        await store.jogger.rotateTCP({
           axis: opts.axis,
           direction: opts.direction,
           velocityRadsPerSec: store.rotationVelocityRadsPerSec,
@@ -189,10 +194,7 @@ export const JoggingCartesianTab = observer(
     return (
       <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
         <Stack gap={2}>
-          {/* Jogging options */}
           <JoggingOptions store={store} />
-
-          {/* Velocity slider */}
           <JoggingVelocitySlider store={store} />
           <Divider />
         </Stack>
@@ -257,7 +259,7 @@ export const JoggingCartesianTab = observer(
                   getDisplayedValue={() =>
                     formatMM(
                       store.jogger.motionStream.rapidlyChangingMotionState
-                        .tcp_pose?.position[axis.id] || 0,
+                        .tcp_pose?.position?.[XYZ_TO_VECTOR[axis.id]] || 0,
                     )
                   }
                   startJogging={(direction: "-" | "+") =>
@@ -301,7 +303,7 @@ export const JoggingCartesianTab = observer(
                   getDisplayedValue={() =>
                     formatDegrees(
                       store.jogger.motionStream.rapidlyChangingMotionState
-                        .tcp_pose?.orientation?.[axis.id] || 0,
+                        .tcp_pose?.orientation?.[XYZ_TO_VECTOR[axis.id]] || 0,
                     )
                   }
                   startJogging={(direction: "-" | "+") =>

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -17,14 +17,14 @@ export const JoggingJointLimitDetector = ({
   const { t } = useTranslation()
 
   const [jointLimitsReached, setJointLimitsReached] = useState(
-    store.jogger.motionStream.rapidlyChangingMotionState.state
+    store.jogger.motionStream.rapidlyChangingMotionState
       .joint_limit_reached.limit_reached,
   )
   const jointLimitsReachedRef = useRef(jointLimitsReached)
 
   useAnimationFrame(() => {
     const newLimitsReached =
-      store.jogger.motionStream.rapidlyChangingMotionState.state
+      store.jogger.motionStream.rapidlyChangingMotionState
         .joint_limit_reached.limit_reached
 
     if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {

package/src/components/jogging/JoggingJointTab.tsx

@@ -16,7 +16,7 @@ export const JoggingJointTab = observer(
     }) {
       await store.activate()
 
-      await store.jogger.startJointRotation({
+      await store.jogger.rotateJoints({
         joint: opts.joint,
         direction: opts.direction,
         velocityRadsPerSec: store.rotationVelocityRadsPerSec,
@@ -37,12 +37,12 @@ export const JoggingJointTab = observer(
           justifyContent="center"
           alignItems="stretch"
           sx={{ flexGrow: "1" }}
-          id="JointControls"
         >
           <Stack alignItems="center" gap="24px">
             {store.jogger.motionStream.joints.map((joint) => {
               const jointLimits =
-                store.motionGroupSpec.mechanical_joint_limits?.[joint.index]
+                store.motionGroupDescription.operation_limits.auto_limits
+                  ?.joints?.[joint.index]?.position
               const lowerLimitDegs =
                 jointLimits?.lower_limit !== undefined
                   ? radiansToDegrees(jointLimits.lower_limit)
@@ -80,7 +80,7 @@ export const JoggingJointTab = observer(
                     getValueDegs={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState
-                          .state.joint_position.joints[joint.index]
+                          .joint_position[joint.index]
                       return value !== undefined
                         ? radiansToDegrees(value)
                         : undefined

package/src/components/jogging/JoggingOptions.tsx

@@ -1,5 +1,6 @@
 import { Box, MenuItem } from "@mui/material"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { useTranslation } from "react-i18next"
 import AdornedSelect from "../experimental/utils/AdornedSelect"
 import {
@@ -11,6 +12,7 @@ import {
 
 export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   const { t } = useTranslation()
+  const componentId = useId()
   const joggingOptions: React.ReactElement[] = []
 
   function translateOrientation(orientation: OrientationId): string {
@@ -28,7 +30,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
     joggingOptions.push(
       <AdornedSelect
         key="coord"
-        labelId="jogging-coord-select"
+        labelId={`jogging-coord-select-${componentId}`}
         labelValue={t("Jogging.CoordinateSystem.hlb")}
         value={store.selectedCoordSystemId}
         size="small"
@@ -54,7 +56,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
     joggingOptions.push(
       <AdornedSelect
         key="tcp"
-        labelId="jogging-tcp-select"
+        labelId={`jogging-tcp-select-${componentId}`}
         labelValue="TCP"
         value={store.selectedTcpId}
         size="small"
@@ -78,8 +80,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
       <AdornedSelect
         key="orientation"
         labelValue={t("Jogging.Cartesian.Orientation.lb")}
-        id="orientation-select"
-        labelId="orientation-select"
+        labelId={`orientation-select-${componentId}`}
         value={store.selectedOrientation}
         onChange={(event) =>
           store.setSelectedOrientation(event.target.value as OrientationId)
@@ -100,7 +101,7 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
       <AdornedSelect
         key="increment"
         labelValue={t("Jogging.Increment.hlb")}
-        labelId="jogging-increment-select"
+        labelId={`jogging-increment-select-${componentId}`}
         size="small"
         variant="filled"
         value={store.activeDiscreteIncrement?.id || "continuous"}

package/src/components/jogging/JoggingPanel.tsx

@@ -1,14 +1,16 @@
 import MoveIcon from "@mui/icons-material/OpenWith"
 import ShareIcon from "@mui/icons-material/Share"
 import { Stack, Tab, Tabs, type SxProps } from "@mui/material"
-import { NovaClient } from "@wandelbots/nova-js/v1"
+import { NovaClient } from "@wandelbots/nova-js/v2"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../../externalizeComponent"
+import { JoggerConnection } from "../../lib/JoggerConnection"
 import { LoadingCover } from "../LoadingCover"
+import { JoggingBlocked } from "./JoggingBlocked"
 import { JoggingCartesianTab } from "./JoggingCartesianTab"
 import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
@@ -58,7 +60,7 @@ export const JoggingPanel = externalizeComponent(
       try {
         let joggingStore = props.store
         if (!joggingStore) {
-          const jogger = await nova.connectJogger(props.motionGroupId)
+          const jogger = await JoggerConnection.open(nova, props.motionGroupId)
           joggingStore = await JoggingStore.loadFor(jogger)
         }
         runInAction(() => {
@@ -181,7 +183,6 @@ const JoggingPanelInner = observer(
             )
           })}
         </Tabs>
-
         {/* Current tab content */}
         <Stack
           flexGrow={1}
@@ -190,6 +191,8 @@ const JoggingPanelInner = observer(
         >
           {renderTabContent()}
         </Stack>
+        {/* Overlay when jogging connection is blocked */}
+        {store.blocked && <JoggingBlocked store={store} />}
       </Stack>
     )
   },