@wandelbots/wandelbots-js-react-components 1.3.2 → 1.4.1

package/dist/themes/color.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export declare function ColorSection(props: {
+    name: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Color({ name, color }: {
+    name: string;
+    color: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color.d.ts.map

package/dist/themes/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/themes/color.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE9D,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAexE;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CAsDrE"}

package/dist/themes/theme.d.ts

@@ -0,0 +1,144 @@
+import { ThemeOptions } from '@mui/material/styles';
+type ThemeName = 'wandelbots';
+export declare const allThemes: {
+    wb: import("@mui/material").Theme;
+};
+export interface NamedThemeOptions extends ThemeOptions {
+    name: ThemeName;
+}
+declare module '@mui/material/styles' {
+    interface Theme {
+        backgrounds: {
+            light1: string;
+            light2: string;
+            medium: string;
+            dark1: string;
+            dark2: string;
+        };
+        buttonPrimary: {
+            background: string;
+            text: string;
+        };
+        buttonSecondary: {
+            background: string;
+            text: string;
+        };
+        buttonBack: {
+            background: string;
+            text: string;
+        };
+        inputField: {
+            background: string;
+            text: string;
+            unitBackground: string;
+            unitText: string;
+        };
+        sidebar: {
+            background: string;
+            backgroundSelected: string;
+            selected: string;
+        };
+        actionPanel: {
+            background: string;
+            backgroundSelected: string;
+            text: string;
+        };
+        controlPanel: {
+            background: string;
+            text: string;
+        };
+        listItem: {
+            background: string;
+            backgroundSelected: string;
+            textTitle: string;
+            textTitleSelected: string;
+            textDesc: string;
+            textDescSelected: string;
+        };
+        breadcrumb: {
+            background: string;
+            text: string;
+            textSelected: string;
+        };
+        axes: {
+            x: string;
+            y: string;
+            z: string;
+        };
+        viewport: {
+            background: string;
+            controlBackground: string;
+        };
+        tabIcon: {
+            color: string;
+        };
+    }
+    interface ThemeOptions {
+        backgrounds?: {
+            light1?: string;
+            light2?: string;
+            medium?: string;
+            dark1?: string;
+            dark2?: string;
+        };
+        buttonPrimary?: {
+            background?: string;
+            text?: string;
+        };
+        buttonSecondary?: {
+            background?: string;
+            text?: string;
+        };
+        buttonBack?: {
+            background?: string;
+            text?: string;
+        };
+        inputField?: {
+            background?: string;
+            text?: string;
+            unitBackground?: string;
+            unitText?: string;
+        };
+        sidebar?: {
+            background?: string;
+            backgroundSelected?: string;
+            selected?: string;
+        };
+        actionPanel?: {
+            background?: string;
+            backgroundSelected?: string;
+            text?: string;
+        };
+        controlPanel?: {
+            background?: string;
+            text?: string;
+        };
+        listItem?: {
+            background?: string;
+            backgroundSelected?: string;
+            textTitle?: string;
+            textTitleSelected?: string;
+            textDesc?: string;
+            textDescSelected?: string;
+        };
+        breadcrumb?: {
+            background?: string;
+            text?: string;
+            textSelected?: string;
+        };
+        axes?: {
+            x?: string;
+            y?: string;
+            z?: string;
+        };
+        viewport?: {
+            background?: string;
+            controlBackground?: string;
+        };
+        tabIcon?: {
+            color?: string;
+        };
+    }
+}
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/themes/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/themes/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKpD,KAAK,SAAS,GAAG,YAAY,CAAA;AAE7B,eAAO,MAAM,SAAS;;CAErB,CAAA;AAED,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,IAAI,EAAE,SAAS,CAAA;CAChB;AAED,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,KAAK;QACb,WAAW,EAAE;YACX,MAAM,EAAE,MAAM,CAAC;YACf,MAAM,EAAE,MAAM,CAAC;YACf,MAAM,EAAE,MAAM,CAAC;YACf,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,CAAA;QACD,aAAa,EAAE;YACb,UAAU,EAAE,MAAM,CAAC;YACnB,IAAI,EAAE,MAAM,CAAC;SACd,CAAA;QACD,eAAe,EAAE;YACf,UAAU,EAAE,MAAM,CAAC;YACnB,IAAI,EAAE,MAAM,CAAC;SACd,CAAA;QACD,UAAU,EAAE;YACV,UAAU,EAAE,MAAM,CAAC;YACnB,IAAI,EAAE,MAAM,CAAC;SACd,CAAA;QACD,UAAU,EAAE;YACV,UAAU,EAAE,MAAM,CAAC;YACnB,IAAI,EAAE,MAAM,CAAC;YACb,cAAc,EAAE,MAAM,CAAC;YACvB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAA;QACD,OAAO,EAAE;YACP,UAAU,EAAE,MAAM,CAAC;YACnB,kBAAkB,EAAE,MAAM,CAAC;YAC3B,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAA;QACD,WAAW,EAAE;YACX,UAAU,EAAE,MAAM,CAAC;YACnB,kBAAkB,EAAE,MAAM,CAAC;YAC3B,IAAI,EAAE,MAAM,CAAC;SACd,CAAA;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,MAAM,CAAC;YACnB,IAAI,EAAE,MAAM,CAAC;SACd,CAAA;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,MAAM,CAAC;YACnB,kBAAkB,EAAE,MAAM,CAAC;YAC3B,SAAS,EAAE,MAAM,CAAC;YAClB,iBAAiB,EAAE,MAAM,CAAC;YAC1B,QAAQ,EAAE,MAAM,CAAC;YACjB,gBAAgB,EAAE,MAAM,CAAC;SAC1B,CAAA;QACD,UAAU,EAAE;YACV,UAAU,EAAE,MAAM,CAAC;YACnB,IAAI,EAAE,MAAM,CAAA;YACZ,YAAY,EAAE,MAAM,CAAC;SACtB,CAAA;QACD,IAAI,EAAE;YACJ,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;SACX,CAAC;QACF,QAAQ,EAAE;YACR,UAAU,EAAE,MAAM,CAAC;YACnB,iBAAiB,EAAE,MAAM,CAAC;SAC3B,CAAC;QACF,OAAO,EAAE;YACP,KAAK,EAAE,MAAM,CAAC;SACf,CAAA;KACF;IAED,UAAU,YAAY;QACpB,WAAW,CAAC,EAAE;YACZ,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAA;QACD,aAAa,CAAC,EAAE;YACd,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAA;QACD,eAAe,CAAC,EAAE;YAChB,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAA;QACD,UAAU,CAAC,EAAE;YACX,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAA;QACD,UAAU,CAAC,EAAE;YACX,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;SACnB,CAAA;QACD,OAAO,CAAC,EAAE;YACR,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;YAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;SACnB,CAAA;QACD,WAAW,CAAC,EAAE;YACZ,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;YAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAA;QACD,YAAY,CAAC,EAAE;YACb,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAA;QACD,QAAQ,CAAC,EAAE;YACT,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;YAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;SAC3B,CAAA;QACD,UAAU,CAAC,EAAE;YACX,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,IAAI,CAAC,EAAE,MAAM,CAAA;YACb,YAAY,CAAC,EAAE,MAAM,CAAC;SACvB,CAAA;QACD,IAAI,CAAC,EAAE;YACL,CAAC,CAAC,EAAE,MAAM,CAAC;YACX,CAAC,CAAC,EAAE,MAAM,CAAC;YACX,CAAC,CAAC,EAAE,MAAM,CAAC;SACZ,CAAC;QACF,QAAQ,CAAC,EAAE;YACT,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;SAC5B,CAAC;QACF,OAAO,CAAC,EAAE;YACR,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAA;KACF;CACF"}

package/dist/themes/wbTheme.d.ts

@@ -0,0 +1,73 @@
+/** Colors for the dark theme */
+export declare const darkColors: {
+    primary: string;
+    textDefault: string;
+    textInverse: string;
+    textError: string;
+    textSubtle: string;
+    backgroundDefault: string;
+    inputBackgroundDefault: string;
+    borderColorDefault: string;
+    selectBackground: string;
+    appBarBackground: string;
+    virtualRobot: string;
+    physicalRobot: string;
+    robotViewportBackground: string;
+    viewportButtonInactiveBackground: string;
+    viewportButtonHover: string;
+    viewportButtonActiveBackground: string;
+    tabsBarBackground: string;
+    activeTabBackground: string;
+    omniverseConfigurationSuccess: string;
+    omniverseConfigurationFailure: string;
+};
+/** Colors for the light theme */
+export declare const lightColors: {
+    primary: string;
+    textDefault: string;
+    textInverse: string;
+    textError: string;
+    textSubtle: string;
+    backgroundDefault: string;
+    inputBackgroundDefault: string;
+    borderColorDefault: string;
+    selectBackground: string;
+    appBarBackground: string;
+    virtualRobot: string;
+    physicalRobot: string;
+    robotViewportBackground: string;
+    viewportButtonInactiveBackground: string;
+    viewportButtonHover: string;
+    viewportButtonActiveBackground: string;
+    tabsBarBackground: string;
+    activeTabBackground: string;
+    omniverseConfigurationSuccess: string;
+    omniverseConfigurationFailure: string;
+};
+/** Gets the colors for the current theme (light or dark) */
+export declare function useThemeColors(): {
+    primary: string;
+    textDefault: string;
+    textInverse: string;
+    textError: string;
+    textSubtle: string;
+    backgroundDefault: string;
+    inputBackgroundDefault: string;
+    borderColorDefault: string;
+    selectBackground: string;
+    appBarBackground: string;
+    virtualRobot: string;
+    physicalRobot: string;
+    robotViewportBackground: string;
+    viewportButtonInactiveBackground: string;
+    viewportButtonHover: string;
+    viewportButtonActiveBackground: string;
+    tabsBarBackground: string;
+    activeTabBackground: string;
+    omniverseConfigurationSuccess: string;
+    omniverseConfigurationFailure: string;
+};
+export declare const darkTheme: import("@mui/material").Theme;
+export declare const lightTheme: import("@mui/material").Theme;
+export declare const wbTheme: import("@mui/material").Theme;
+//# sourceMappingURL=wbTheme.d.ts.map

package/dist/themes/wbTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wbTheme.d.ts","sourceRoot":"","sources":["../../src/themes/wbTheme.ts"],"names":[],"mappings":"AAsBA,gCAAgC;AAChC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;CAsBvB,CAAA;AAED,4DAA4D;AAC5D,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;EAE7B;AA4GD,eAAO,MAAM,SAAS,+BAA8B,CAAA;AACpD,eAAO,MAAM,UAAU,+BAA+B,CAAA;AACtD,eAAO,MAAM,OAAO,+BAAY,CAAA"}

package/dist/themes/wbTheme.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+declare const ColorPalette: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ColorPalette>;
+export default meta;
+type Story = StoryObj<typeof ColorPalette>;
+export declare const colorPalette: Story;
+//# sourceMappingURL=wbTheme.stories.d.ts.map

package/dist/themes/wbTheme.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wbTheme.stories.d.ts","sourceRoot":"","sources":["../../src/themes/wbTheme.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,YAAY,+CAiDjB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAEnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,YAAY,EAAE,KAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "files": [
     "dist",
@@ -23,7 +23,6 @@
     "tsc": "tsc --pretty --noEmit",
     "test": "npm run build",
     "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
-    "build:dev": "rollup -c rollup.config.dev.mjs",
     "build-storybook": "storybook build"
   },
   "repository": {

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

@@ -1,4 +1,5 @@
-import { SafetySetupSafetyZone, Geometry } from "@wandelbots/wandelbots-js"
+import { SafetySetupSafetyZone } from "@wandelbots/wandelbots-js"
+import { Geometry } from "@wandelbots/wandelbots-api-client"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 import { type GroupProps } from "@react-three/fiber"

package/src/components/robots/ABB_1200_07_7.tsx

@@ -4,7 +4,11 @@ import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
 import RobotAnimator from "./RobotAnimator"
 
-export function ABB_1200_07_7({ modelURL, connectedMotionGroup, ...props }: RobotProps) {
+export function ABB_1200_07_7({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -20,7 +24,7 @@ export function ABB_1200_07_7({ modelURL, connectedMotionGroup, ...props }: Robo
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/DHRobot.tsx

@@ -13,7 +13,11 @@ import type { DHRobotProps } from "./SupportedRobot"
 const CHILD_LINE = "line"
 const CHILD_MESH = "mesh"
 
-export function DHRobot({ connectedMotionGroup, ...props }: DHRobotProps) {
+export function DHRobot({
+  rapidlyChangingMotionState,
+  dhParameters,
+  ...props
+}: DHRobotProps) {
   // reused in every update
   const accumulatedMatrix = new Matrix4()
 
@@ -53,13 +57,11 @@ export function DHRobot({ connectedMotionGroup, ...props }: DHRobotProps) {
     mesh: THREE.Mesh,
     jointValue: number,
   ) {
-    const dh_parameters =
-      connectedMotionGroup.motionGroupSpecification.dh_parameters
-    if (!dh_parameters) {
+    if (!dhParameters) {
       return
     }
 
-    const dh_parameter = dh_parameters[jointIndex]
+    const dh_parameter = dhParameters[jointIndex]
     if (!dh_parameter) {
       return
     }
@@ -90,7 +92,7 @@ export function DHRobot({ connectedMotionGroup, ...props }: DHRobotProps) {
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
         jointCollector={getAllJoints}
@@ -100,29 +102,26 @@ export function DHRobot({ connectedMotionGroup, ...props }: DHRobotProps) {
           <sphereGeometry args={[0.01, 32, 32]} />
           <meshStandardMaterial color={"black"} depthTest={true} />
         </mesh>
-        {connectedMotionGroup.motionGroupSpecification.dh_parameters!.map(
-          (param, index) => {
-            const { a, b } = getLinePoints(
-              param,
-              connectedMotionGroup.rapidlyChangingMotionState.state
-                .joint_position.joints[index] ?? 0,
-            )
-            return (
-              <group name={`group_${index}`} key={"group_" + index}>
-                <Line
-                  name={CHILD_LINE}
-                  points={[a, b]}
-                  color={"white"}
-                  lineWidth={5}
-                />
-                <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
-                  <sphereGeometry args={[0.01, 32, 32]} />
-                  <meshStandardMaterial color={"black"} depthTest={true} />
-                </mesh>
-              </group>
-            )
-          },
-        )}
+        {dhParameters!.map((param, index) => {
+          const { a, b } = getLinePoints(
+            param,
+            rapidlyChangingMotionState.state.joint_position.joints[index] ?? 0,
+          )
+          return (
+            <group name={`group_${index}`} key={"group_" + index}>
+              <Line
+                name={CHILD_LINE}
+                points={[a, b]}
+                color={"white"}
+                lineWidth={5}
+              />
+              <mesh name={CHILD_MESH} key={"mesh_" + index} position={b}>
+                <sphereGeometry args={[0.01, 32, 32]} />
+                <meshStandardMaterial color={"black"} depthTest={true} />
+              </mesh>
+            </group>
+          )
+        })}
       </group>
     </>
   )

package/src/components/robots/FANUC_ARC_Mate_100iD.tsx

@@ -6,7 +6,7 @@ import { animated } from "@react-spring/three"
 
 export function FANUC_ARC_Mate_100iD({
   modelURL,
-  connectedMotionGroup,
+  rapidlyChangingMotionState,
   ...props
 }: RobotProps) {
   const gltf = useGLTF(modelURL) as any
@@ -24,7 +24,7 @@ export function FANUC_ARC_Mate_100iD({
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/FANUC_ARC_Mate_120iD.tsx

@@ -6,7 +6,7 @@ import { animated } from "@react-spring/three"
 
 export function FANUC_ARC_Mate_120iD({
   modelURL,
-  connectedMotionGroup,
+  rapidlyChangingMotionState,
   ...props
 }: RobotProps) {
   const gltf = useGLTF(modelURL) as any
@@ -24,7 +24,7 @@ export function FANUC_ARC_Mate_120iD({
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/FANUC_CRX10iA.tsx

@@ -4,7 +4,11 @@ import type { RobotProps } from "./SupportedRobot"
 import RobotAnimator from "./RobotAnimator"
 import { animated } from "@react-spring/three"
 
-export function FANUC_CRX10iA({ modelURL, connectedMotionGroup, ...props }: RobotProps) {
+export function FANUC_CRX10iA({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -20,7 +24,7 @@ export function FANUC_CRX10iA({ modelURL, connectedMotionGroup, ...props }: Robo
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/FANUC_CRX25iA.tsx

@@ -4,7 +4,11 @@ import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
 import RobotAnimator from "./RobotAnimator"
 
-export function FANUC_CRX25iA({ modelURL, connectedMotionGroup, ...props }: RobotProps) {
+export function FANUC_CRX25iA({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -20,7 +24,7 @@ export function FANUC_CRX25iA({ modelURL, connectedMotionGroup, ...props }: Robo
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/FANUC_CRX25iAL.tsx

@@ -4,7 +4,11 @@ import type { RobotProps } from "./SupportedRobot"
 import { animated } from "@react-spring/three"
 import RobotAnimator from "./RobotAnimator"
 
-export function FANUC_CRX25iAL({ modelURL, connectedMotionGroup, ...props }: RobotProps) {
+export function FANUC_CRX25iAL({
+  modelURL,
+  rapidlyChangingMotionState,
+  ...props
+}: RobotProps) {
   const gltf = useGLTF(modelURL) as any
   const nodes = gltf.nodes
   const materials = gltf.materials
@@ -20,7 +24,7 @@ export function FANUC_CRX25iAL({ modelURL, connectedMotionGroup, ...props }: Rob
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/KUKA_KR210_R2700.tsx

@@ -6,7 +6,7 @@ import RobotAnimator from "./RobotAnimator"
 
 export function KUKA_KR210_R2700({
   modelURL,
-  connectedMotionGroup,
+  rapidlyChangingMotionState,
   ...props
 }: RobotProps) {
   const gltf = useGLTF(modelURL) as any
@@ -26,7 +26,7 @@ export function KUKA_KR210_R2700({
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/KUKA_KR270_R2700.tsx

@@ -6,7 +6,7 @@ import RobotAnimator from "./RobotAnimator"
 
 export function KUKA_KR270_R2700({
   modelURL,
-  connectedMotionGroup,
+  rapidlyChangingMotionState,
   ...props
 }: RobotProps) {
   const gltf = useGLTF(modelURL) as any
@@ -26,7 +26,7 @@ export function KUKA_KR270_R2700({
   return (
     <>
       <RobotAnimator
-        connectedMotionGroup={connectedMotionGroup}
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
         robotRootObjectName="Scene"
         onRotationChanged={setRotation}
       />

package/src/components/robots/Robot.tsx

@@ -0,0 +1,42 @@
+import { type GroupProps } from "@react-three/fiber"
+
+import type { ConnectedMotionGroup } from "@wandelbots/wandelbots-js"
+import { defaultGetModel, SupportedRobot } from "./SupportedRobot"
+
+export type ConnectecMotionGroupRobotProps = {
+  connectedMotionGroup: ConnectedMotionGroup
+  getModel?: (modelFromController: string) => string
+} & GroupProps
+
+/**
+ * The Robot component is a wrapper around the SupportedRobot component
+ * for usage with @wandelbots/wandelbots-js ConnectedMotionGroup object.
+ *
+ * @param {ConnectecMotionGroupRobotProps} props - The properties for the Robot component.
+ * @param {ConnectedMotionGroup} props.connectedMotionGroup - The connected motion group containing motion state and parameters.
+ * @param {Function} [props.getModel=defaultGetModel] - Optional function to get the model URL. Defaults to defaultGetModel.
+ * @param {Object} props - Additional properties passed to the SupportedRobot component.
+ *
+ * @returns {JSX.Element} The rendered SupportedRobot component.
+ */
+export function Robot({
+  connectedMotionGroup,
+  getModel = defaultGetModel,
+  ...props
+}: ConnectecMotionGroupRobotProps) {
+  if (!connectedMotionGroup.dhParameters) {
+    return null
+  }
+
+  return (
+    <SupportedRobot
+      rapidlyChangingMotionState={
+        connectedMotionGroup.rapidlyChangingMotionState
+      }
+      modelFromController={connectedMotionGroup.modelFromController || ""}
+      dhParameters={connectedMotionGroup.dhParameters}
+      getModel={getModel}
+      {...props}
+    />
+  )
+}

package/src/components/robots/RobotAnimator.tsx

@@ -6,18 +6,18 @@ import {
   getAllJointsByName,
   type RobotSceneJoint,
 } from "../utils/robotTreeQuery"
-import type { MotionStreamConnection } from "@wandelbots/wandelbots-js"
+import type { MotionGroupStateResponse } from "@wandelbots/wandelbots-api-client"
 import { useAutorun } from "../utils/hooks"
 
 type RobotAnimatorProps = {
-  connectedMotionGroup: MotionStreamConnection
+  rapidlyChangingMotionState: MotionGroupStateResponse
   robotRootObjectName: string
   onRotationChanged: (joints: THREE.Object3D[], jointValues: number[]) => void
   jointCollector?: (rootObject: THREE.Object3D) => RobotSceneJoint[]
 }
 
 export default function RobotAnimator({
-  connectedMotionGroup,
+  rapidlyChangingMotionState,
   robotRootObjectName,
   onRotationChanged,
   jointCollector,
@@ -58,7 +58,7 @@ export default function RobotAnimator({
 
   useAutorun(() => {
     const newJointValues =
-      connectedMotionGroup.rapidlyChangingMotionState.state.joint_position.joints.filter(
+      rapidlyChangingMotionState.state.joint_position.joints.filter(
         (item) => item !== undefined,
       )
 
@@ -68,8 +68,7 @@ export default function RobotAnimator({
   const [axisValues, setSpring] = useSpring(() => ({
     ...Object.assign(
       {},
-      connectedMotionGroup.rapidlyChangingMotionState.state.joint_position
-        .joints,
+      rapidlyChangingMotionState.state.joint_position.joints,
     ),
     onChange: () => {
       setRotation()