@wandelbots/wandelbots-js-react-components/dist/manufacturerHomePositions-Ca80ycLi.cjs.map

React UI toolkit for building applications on top of the Wandelbots platform

{"version":3,"file":"manufacturerHomePositions-Ca80ycLi.cjs","sources":["../src/components/3d-viewport/collider/colliderShapeToBufferGeometry.ts","../src/components/3d-viewport/collider/ColliderElement.tsx","../src/components/3d-viewport/collider/ColliderCollection.tsx","../src/components/3d-viewport/collider/CollisionSceneRenderer.tsx","../src/components/3d-viewport/PresetEnvironment.tsx","../src/components/3d-viewport/SafetyZonesRenderer.tsx","../src/components/3d-viewport/TrajectoryRenderer.tsx","../src/components/robots/robotModelLogic.ts","../src/components/robots/RobotAnimator.tsx","../src/components/robots/DHRobot.tsx","../src/components/ConsoleFilter.tsx","../src/components/robots/GenericRobot.tsx","../src/components/robots/ghostStyle.ts","../src/components/robots/SupportedRobot.tsx","../src/components/robots/Robot.tsx","../src/components/RobotCard.tsx","../src/components/robots/AxisConfig.ts","../src/components/robots/manufacturerHomePositions.ts"],"sourcesContent":["import type { ColliderShape } from \"@wandelbots/nova-js/v1\"\nimport * as THREE from \"three\"\nimport { ConvexGeometry } from \"three-stdlib\"\n\nexport function colliderShapeToBufferGeometry(\n  shape: ColliderShape,\n): THREE.BufferGeometry {\n  const shapeType = shape.shape_type\n  switch (shapeType) {\n    case \"convex_hull\":\n      return new ConvexGeometry(\n        shape.vertices.map(\n          (vertex) =>\n            new THREE.Vector3(\n              vertex[0] / 1000,\n              vertex[1] / 1000,\n              vertex[2] / 1000,\n            ),\n        ),\n      )\n    case \"box\":\n      return new THREE.BoxGeometry(\n        shape.size_x / 1000,\n        shape.size_y / 1000,\n        shape.size_z / 1000,\n      )\n    case \"sphere\":\n      return new THREE.SphereGeometry(shape.radius / 1000)\n    case \"capsule\":\n      return new THREE.CapsuleGeometry(\n        shape.radius / 1000,\n        shape.cylinder_height / 1000,\n      )\n    case \"cylinder\":\n      return new THREE.CylinderGeometry(\n        shape.radius / 1000,\n        shape.radius / 1000,\n        shape.height / 1000,\n      )\n    case \"rectangle\": {\n      return new THREE.BoxGeometry(shape.size_x / 1000, shape.size_y / 1000, 0)\n    }\n    default: {\n      console.warn(`${shape.shape_type} is not supported`)\n      return new THREE.BufferGeometry()\n    }\n  }\n}\n","import type { Collider } from \"@wandelbots/nova-js/v1\"\nimport type React from \"react\"\nimport * as THREE from \"three\"\nimport { colliderShapeToBufferGeometry } from \"./colliderShapeToBufferGeometry\"\n\ntype ColliderElementProps = {\n  name?: string\n  collider: Collider\n  children?: React.ReactNode\n}\n\nexport default function ColliderElement({\n  name,\n  collider,\n  children,\n}: ColliderElementProps) {\n  const position = collider.pose?.position ?? [0, 0, 0]\n  const rotation = collider.pose?.orientation ?? [0, 0, 0]\n  if (collider.margin) {\n    console.warn(`${name} margin is not supported`)\n  }\n  return (\n    <mesh\n      name={name}\n      position={new THREE.Vector3(\n        position[0],\n        position[1],\n        position[2],\n      ).divideScalar(1000)}\n      rotation={new THREE.Euler(rotation[0], rotation[1], rotation[2], \"XYZ\")}\n      geometry={colliderShapeToBufferGeometry(collider.shape)}\n    >\n      {children}\n    </mesh>\n  )\n}\n","import type { ThreeElements } from \"@react-three/fiber\"\nimport type { Collider } from \"@wandelbots/nova-js/v1\"\nimport ColliderElement from \"./ColliderElement\"\n\nexport type MeshChildrenProvider = (\n  key: string,\n  collider: Collider,\n) => React.ReactNode\n\ntype ColliderCollectionProps = {\n  name?: string\n  colliders: Record<string, Collider>\n  meshChildrenProvider: MeshChildrenProvider\n} & ThreeElements[\"group\"]\n\nexport default function ColliderCollection({\n  name,\n  colliders,\n  meshChildrenProvider,\n  ...props\n}: ColliderCollectionProps) {\n  return (\n    <group name={name} {...props}>\n      {Object.entries(colliders).map(([colliderKey, collider]) => (\n        <ColliderElement\n          key={colliderKey}\n          name={colliderKey}\n          collider={collider}\n          children={meshChildrenProvider(colliderKey, collider)}\n        />\n      ))}\n    </group>\n  )\n}\n","import type { CollisionScene } from \"@wandelbots/nova-js/v1\"\nimport ColliderCollection, {\n  type MeshChildrenProvider,\n} from \"./ColliderCollection\"\n\ntype CollisionSceneRendererProps = {\n  scene: CollisionScene\n  meshChildrenProvider: MeshChildrenProvider\n}\n\nexport default function CollisionSceneRenderer({\n  scene,\n  meshChildrenProvider,\n}: CollisionSceneRendererProps) {\n  const colliders = scene.colliders\n  return (\n    <group>\n      {colliders && (\n        <ColliderCollection\n          meshChildrenProvider={meshChildrenProvider}\n          colliders={colliders}\n        />\n      )}\n    </group>\n  )\n}\n","import { Environment, Lightformer } from \"@react-three/drei\"\n\n/**\n * Renders a preset environment for the 3D scene.\n * This component wraps the scene with an `Environment` component\n * and builds a lightmap build with `Lightformers`.\n */\nexport function PresetEnvironment() {\n  return (\n    <Environment>\n      <Lightformers />\n    </Environment>\n  )\n}\n\nfunction Lightformers({ positions = [2, 0, 2, 0, 2, 0, 2, 0] }) {\n  return (\n    <>\n      {/* Ceiling */}\n      <Lightformer\n        intensity={5}\n        rotation-x={Math.PI / 2}\n        position={[0, 5, -9]}\n        scale={[10, 10, 1]}\n      />\n      <group rotation={[0, 0.5, 0]}>\n        <group>\n          {positions.map((x, i) => (\n            <Lightformer\n              key={i}\n              form=\"circle\"\n              intensity={5}\n              rotation={[Math.PI / 2, 0, 0]}\n              position={[x, 4, i * 4]}\n              scale={[3, 1, 1]}\n            />\n          ))}\n        </group>\n      </group>\n      {/* Sides */}\n      <Lightformer\n        intensity={40}\n        rotation-y={Math.PI / 2}\n        position={[-5, 1, -1]}\n        scale={[20, 0.1, 1]}\n      />\n      <Lightformer\n        intensity={20}\n        rotation-y={-Math.PI}\n        position={[-5, -2, -1]}\n        scale={[20, 0.1, 1]}\n      />\n\n      <Lightformer\n        rotation-y={Math.PI / 2}\n        position={[-5, -1, -1]}\n        scale={[20, 0.5, 1]}\n        intensity={5}\n      />\n      <Lightformer\n        rotation-y={-Math.PI / 2}\n        position={[10, 1, 0]}\n        scale={[20, 1, 1]}\n        intensity={10}\n      />\n\n      {/* Key */}\n      <Lightformer\n        form=\"ring\"\n        color=\"white\"\n        intensity={5}\n        scale={10}\n        position={[-15, 4, -18]}\n        target={[0, 0, 0]}\n      />\n    </>\n  )\n}\n","import { type ThreeElements } from \"@react-three/fiber\"\nimport type { Geometry, SafetySetupSafetyZone } from \"@wandelbots/nova-js/v1\"\nimport * as THREE from \"three\"\nimport { ConvexGeometry } from \"three-stdlib\"\n\nexport type SafetyZonesRendererProps = {\n  safetyZones: SafetySetupSafetyZone[]\n} & ThreeElements[\"group\"]\n\ninterface CoplanarityResult {\n  isCoplanar: boolean\n  normal?: THREE.Vector3\n}\n\nfunction areVerticesCoplanar(vertices: THREE.Vector3[]): CoplanarityResult {\n  if (vertices.length < 3) {\n    console.log(\"Not enough vertices to define a plane\")\n    return { isCoplanar: false }\n  }\n\n  // Convert Vector3d to THREE.Vector3\n  const v0 = new THREE.Vector3(vertices[0].x, vertices[0].y, vertices[0].z)\n  const v1 = new THREE.Vector3(vertices[1].x, vertices[1].y, vertices[1].z)\n  const v2 = new THREE.Vector3(vertices[2].x, vertices[2].y, vertices[2].z)\n\n  const vector1 = new THREE.Vector3().subVectors(v1, v0)\n  const vector2 = new THREE.Vector3().subVectors(v2, v0)\n  const normal = new THREE.Vector3().crossVectors(vector1, vector2).normalize()\n\n  // Check if all remaining vertices lie on the same plane\n  for (let i = 3; i < vertices.length; i++) {\n    const vi = new THREE.Vector3(vertices[i].x, vertices[i].y, vertices[i].z)\n    const vector = new THREE.Vector3().subVectors(vi, v0)\n    const dotProduct = normal.dot(vector)\n    if (Math.abs(dotProduct) > 1e-6) {\n      // Allowing a small tolerance\n      console.log(\"Vertices are not on the same plane\")\n      return { isCoplanar: false }\n    }\n  }\n\n  return { isCoplanar: true, normal }\n}\n\nexport function SafetyZonesRenderer({\n  safetyZones,\n  ...props\n}: SafetyZonesRendererProps) {\n  return (\n    <group {...props}>\n      {safetyZones.map((zone, index) => {\n        let geometries: Geometry[] = []\n        if (zone.geometry) {\n          if (zone.geometry.compound) {\n            geometries = zone.geometry.compound.child_geometries\n          } else if (zone.geometry.convex_hull) {\n            geometries = [zone.geometry]\n          }\n        }\n\n        return geometries.map((geometry, i) => {\n          if (!geometry.convex_hull) return null\n\n          const vertices = geometry.convex_hull.vertices.map(\n            (v) => new THREE.Vector3(v.x / 1000, v.y / 1000, v.z / 1000),\n          )\n\n          // Check if the vertices are on the same plane and only define a plane\n          // Algorithm has troubles with vertices that are on the same plane so we\n          // add a new vertex slightly moved along the normal direction\n          const coplanarityResult = areVerticesCoplanar(vertices)\n\n          if (coplanarityResult.isCoplanar && coplanarityResult.normal) {\n            // Add a new vertex slightly moved along the normal direction\n            const offset = 0.0001 // Adjust the offset as needed\n            const newVertex = new THREE.Vector3().addVectors(\n              vertices[0],\n              coplanarityResult.normal.multiplyScalar(offset),\n            )\n            vertices.push(newVertex)\n          }\n\n          let convexGeometry\n          try {\n            convexGeometry = new ConvexGeometry(vertices)\n          } catch (error) {\n            console.log(\"Error creating ConvexGeometry:\", error)\n            return null\n          }\n          return (\n            <mesh key={`${index}-${i}`} geometry={convexGeometry}>\n              <meshStandardMaterial\n                key={index}\n                attach=\"material\"\n                color=\"#009f4d\"\n                opacity={0.2}\n                depthTest={false}\n                depthWrite={false}\n                transparent\n                polygonOffset\n                polygonOffsetFactor={-i}\n              />\n            </mesh>\n          )\n        })\n      })}\n    </group>\n  )\n}\n","import { Line } from \"@react-three/drei\"\nimport type { GetTrajectoryResponse } from \"@wandelbots/nova-js/v1\"\nimport * as THREE from \"three\"\n\nexport type TrajectoryRendererProps = {\n  trajectory: GetTrajectoryResponse\n} & React.JSX.IntrinsicElements[\"group\"]\n\nexport function TrajectoryRenderer({\n  trajectory,\n  ...props\n}: TrajectoryRendererProps) {\n  const points =\n    trajectory.trajectory\n      ?.map((point) => {\n        if (point.tcp_pose) {\n          return new THREE.Vector3(\n            point.tcp_pose.position.x / 1000,\n            point.tcp_pose.position.z / 1000,\n            -point.tcp_pose.position.y / 1000,\n          )\n        }\n        return null\n      })\n      .filter((point): point is THREE.Vector3 => point !== null) || []\n\n  return (\n    <group {...props}>\n      {points.length > 0 && (\n        <Line\n          points={points}\n          lineWidth={3}\n          polygonOffset={true}\n          polygonOffsetFactor={10}\n          polygonOffsetUnits={10}\n        />\n      )}\n    </group>\n  )\n}\n","import type { Object3D } from \"three\"\nimport type { GLTF } from \"three-stdlib\"\nimport { version } from \"../../../package.json\"\n\nexport function defaultGetModel(modelFromController: string): string {\n  let useVersion = version\n  if (version.startsWith(\"0.\")) {\n    useVersion = \"\"\n  }\n  return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components${useVersion ? `@${useVersion}` : \"\"}/public/models/${modelFromController}.glb`\n}\n\n/**\n * Finds all the joint groups in a GLTF tree, as identified\n * by the _Jxx name ending convention.\n */\nexport function collectJoints(rootObject: Object3D): Object3D[] {\n  function getAllObjects(root: Object3D): Object3D[] {\n    if (root.children.length === 0) {\n      return [root]\n    }\n    return [root, ...root.children.flatMap((child) => getAllObjects(child))]\n  }\n\n  return getAllObjects(rootObject).filter((o) => isJoint(o))\n}\n\n/**\n * Checks if a specified threejs object represents the flange of a\n * robot, based on the _FLG name ending convention.\n */\nexport function isFlange(node: Object3D) {\n  return node.name.endsWith(\"_FLG\")\n}\n\n/**\n * Checks if a specified threejs object represents a joint of a\n * robot, based on the _Jxx name ending convention.\n */\nexport function isJoint(node: Object3D) {\n  return /_J[0-9]+$/.test(node.name)\n}\n\n/**\n * Validates that the loaded GLTF file has six joints and a flange group.\n */\nexport function parseRobotModel(gltf: GLTF, filename: string): { gltf: GLTF } {\n  let flange: Object3D | undefined\n  const joints: Object3D[] = []\n\n  function parseNode(node: Object3D) {\n    if (isFlange(node)) {\n      if (flange) {\n        throw Error(\n          `Found multiple flange groups in robot model ${filename}; first ${flange.name} then ${node.name}. Only one _FLG group is allowed.`,\n        )\n      }\n\n      flange = node\n    }\n\n    if (isJoint(node)) {\n      joints.push(node)\n    }\n\n    node.children.map(parseNode)\n  }\n\n  parseNode(gltf.scene)\n\n  if (!flange) {\n    throw Error(\n      `No flange group found in robot model ${filename}. Flange must be identified with a name ending in _FLG.`,\n    )\n  }\n\n  return { gltf }\n}\n","import { useFrame, useThree } from \"@react-three/fiber\"\nimport type { DHParameter, MotionGroupState } from \"@wandelbots/nova-js/v2\"\nimport React, { useEffect, useRef } from \"react\"\nimport type { Group, Object3D } from \"three\"\nimport { useAutorun } from \"../utils/hooks\"\nimport { ValueInterpolator } from \"../utils/interpolation\"\nimport { collectJoints } from \"./robotModelLogic\"\n\ntype RobotAnimatorProps = {\n  rapidlyChangingMotionState: MotionGroupState\n  dhParameters: DHParameter[]\n  onRotationChanged?: (joints: Object3D[], jointValues: number[]) => void\n  children: React.ReactNode\n}\n\nexport default function RobotAnimator({\n  rapidlyChangingMotionState,\n  dhParameters,\n  onRotationChanged,\n  children,\n}: RobotAnimatorProps) {\n  const jointValues = useRef<number[]>([])\n  const jointObjects = useRef<Object3D[]>([])\n  const interpolatorRef = useRef<ValueInterpolator | null>(null)\n  const { invalidate } = useThree()\n\n  // Initialize interpolator\n  useEffect(() => {\n    const initialJointValues = rapidlyChangingMotionState.joint_position.filter(\n      (item) => item !== undefined,\n    )\n\n    interpolatorRef.current = new ValueInterpolator(initialJointValues, {\n      tension: 120, // Controls spring stiffness - higher values create faster, more responsive motion\n      friction: 20, // Controls damping - higher values reduce oscillation and create smoother settling\n      threshold: 0.001,\n    })\n\n    return () => {\n      interpolatorRef.current?.destroy()\n    }\n  }, [])\n\n  // Animation loop that runs at the display's refresh rate\n  useFrame((state, delta) => {\n    if (interpolatorRef.current) {\n      const isComplete = interpolatorRef.current.update(delta)\n      setRotation()\n\n      // Trigger a re-render only if the animation is still running\n      if (!isComplete) {\n        invalidate()\n      }\n    }\n  })\n\n  function setGroupRef(group: Group | null) {\n    if (!group) return\n\n    jointObjects.current = collectJoints(group)\n\n    // Set initial position\n    setRotation()\n    invalidate()\n  }\n\n  function updateJoints(newJointValues: number[]) {\n    jointValues.current = newJointValues\n    interpolatorRef.current?.setTarget(newJointValues)\n  }\n\n  function setRotation() {\n    const updatedJointValues = interpolatorRef.current?.getCurrentValues() || []\n\n    if (onRotationChanged) {\n      onRotationChanged(jointObjects.current, updatedJointValues)\n    } else {\n      for (const [index, object] of jointObjects.current.entries()) {\n        const dhParam = dhParameters[index]\n        const rotationOffset = dhParam.theta || 0\n        const rotationSign = dhParam.reverse_rotation_direction ? -1 : 1\n\n        object.rotation.y =\n          rotationSign * (updatedJointValues[index] || 0) + rotationOffset\n      }\n    }\n  }\n\n  useAutorun(() => {\n    const newJointValues = rapidlyChangingMotionState.joint_position.filter(\n      (item) => item !== undefined,\n    )\n\n    requestAnimationFrame(() => updateJoints(newJointValues))\n  })\n\n  return <group ref={setGroupRef}>{children}</group>\n}\n","import { Line } from \"@react-three/drei\"\nimport type { DHParameter } from \"@wandelbots/nova-js/v2\"\nimport React, { useRef } from \"react\"\nimport type * as THREE from \"three\"\nimport { Matrix4, Quaternion, Vector3 } from \"three\"\nimport type { LineGeometry } from \"three/examples/jsm/lines/LineGeometry.js\"\nimport RobotAnimator from \"./RobotAnimator\"\nimport type { DHRobotProps } from \"./SupportedRobot\"\n\nconst CHILD_LINE = \"line\"\nconst CHILD_MESH = \"mesh\"\n\nexport function DHRobot({\n  rapidlyChangingMotionState,\n  dhParameters,\n  ...props\n}: DHRobotProps) {\n  // reused in every update\n  const accumulatedMatrix = new Matrix4()\n\n  // Store direct references to avoid searching by name\n  const lineRefs = useRef<any[]>([])\n  const meshRefs = useRef<(THREE.Mesh | null)[]>([])\n\n  // Initialize refs array when dhParameters change\n  React.useEffect(() => {\n    lineRefs.current = new Array(dhParameters.length).fill(null)\n    meshRefs.current = new Array(dhParameters.length).fill(null)\n  }, [dhParameters.length])\n\n  // Updates accumulatedMatrix with every execution\n  // Reset the matrix to identity if you start a new position update\n  function getLinePoints(\n    dhParameter: DHParameter,\n    jointRotation: number,\n  ): {\n    a: THREE.Vector3\n    b: THREE.Vector3\n  } {\n    const position = new Vector3()\n    const quaternion = new Quaternion()\n    const scale = new Vector3()\n    accumulatedMatrix.decompose(position, quaternion, scale)\n    const prevPosition = position.clone() // Update the previous position\n\n    const matrix = new Matrix4()\n      .makeRotationY(\n        dhParameter.theta! +\n          jointRotation * (dhParameter.reverse_rotation_direction ? -1 : 1),\n      ) // Rotate around Z\n      .multiply(new Matrix4().makeTranslation(0, dhParameter.d! / 1000, 0)) // Translate along Z\n      .multiply(new Matrix4().makeTranslation(dhParameter.a! / 1000, 0, 0)) // Translate along X\n      .multiply(new Matrix4().makeRotationX(dhParameter.alpha!)) // Rotate around X\n\n    // Accumulate transformations\n    accumulatedMatrix.multiply(matrix)\n    accumulatedMatrix.decompose(position, quaternion, scale)\n    return { a: prevPosition, b: position }\n  }\n\n  function setJointLineRotation(\n    jointIndex: number,\n    line: any, // Use any for drei Line component\n    mesh: THREE.Mesh,\n    jointValue: number,\n  ) {\n    if (!dhParameters) {\n      return\n    }\n\n    const dh_parameter = dhParameters[jointIndex]\n    if (!dh_parameter) {\n      return\n    }\n\n    const { a, b } = getLinePoints(dh_parameter, jointValue)\n    const lineGeometry = line.geometry as LineGeometry\n    lineGeometry.setPositions([a.toArray(), b.toArray()].flat())\n\n    mesh.position.set(b.x, b.y, b.z)\n  }\n\n  function setRotation(joints: THREE.Object3D[], jointValues: number[]) {\n    accumulatedMatrix.identity()\n\n    // Use direct refs instead of searching by name\n    for (\n      let jointIndex = 0;\n      jointIndex < Math.min(joints.length, jointValues.length);\n      jointIndex++\n    ) {\n      const line = lineRefs.current[jointIndex]\n      const mesh = meshRefs.current[jointIndex]\n\n      if (line && mesh) {\n        setJointLineRotation(jointIndex, line, mesh, jointValues[jointIndex]!)\n      }\n    }\n  }\n\n  return (\n    <>\n      <RobotAnimator\n        rapidlyChangingMotionState={rapidlyChangingMotionState}\n        dhParameters={dhParameters}\n        onRotationChanged={setRotation}\n      >\n        <group {...props} name=\"Scene\">\n          <mesh>\n            <sphereGeometry args={[0.01, 32, 32]} />\n            <meshStandardMaterial color={\"black\"} depthTest={true} />\n          </mesh>\n          {dhParameters!.map((param, index) => {\n            const { a, b } = getLinePoints(\n              param,\n              rapidlyChangingMotionState.joint_position[index] ?? 0,\n            )\n            const jointName = `dhrobot_J0${index}`\n            return (\n              <group name={jointName} key={jointName}>\n                <Line\n                  ref={(ref) => {\n                    lineRefs.current[index] = ref\n                  }}\n                  name={CHILD_LINE}\n                  points={[a, b]}\n                  color={\"white\"}\n                  lineWidth={5}\n                />\n                <mesh\n                  ref={(ref) => {\n                    meshRefs.current[index] = ref\n                  }}\n                  name={CHILD_MESH}\n                  key={\"mesh_\" + index}\n                  position={b}\n                >\n                  <sphereGeometry args={[0.01, 32, 32]} />\n                  <meshStandardMaterial color={\"black\"} depthTest={true} />\n                </mesh>\n              </group>\n            )\n          })}\n        </group>\n      </RobotAnimator>\n    </>\n  )\n}\n","\"use client\"\nimport { useEffect } from \"react\"\n\nconst defaultWarn = console.warn\n\nexport default function ConsoleFilter() {\n  useEffect(() => {\n    console.warn = (data) => {\n      // This message is caused by a bug from useSpring in combination with Canvas \"demand\" frameloop.\n      // For now we can only suppress this warning there are no sideeffects yet\n      // See https://github.com/pmndrs/react-spring/issues/1586#issuecomment-915051856\n      if (\n        data ===\n        \"Cannot call the manual advancement of rafz whilst frameLoop is not set as demand\"\n      ) {\n        return\n      }\n\n      defaultWarn(data)\n    }\n  }, [])\n\n  return <></>\n}\n","import { useGLTF } from \"@react-three/drei\"\nimport type { ThreeElements } from \"@react-three/fiber\"\nimport React, { useCallback } from \"react\"\nimport type { Group, Mesh } from \"three\"\nimport { type Object3D } from \"three\"\nimport { isFlange, parseRobotModel } from \"./robotModelLogic\"\n\nexport type RobotModelProps = {\n  modelURL: string\n  /**\n   * Called after a robot model has been loaded and\n   * rendered into the threejs scene\n   */\n  postModelRender?: () => void\n  flangeRef?: React.Ref<Group>\n} & ThreeElements[\"group\"]\n\nfunction isMesh(node: Object3D): node is Mesh {\n  return node.type === \"Mesh\"\n}\n\nexport function GenericRobot({\n  modelURL,\n  flangeRef,\n  postModelRender,\n  ...props\n}: RobotModelProps) {\n  const { gltf } = parseRobotModel(\n    useGLTF(modelURL),\n    modelURL.split(\"/\").pop() || modelURL,\n  )\n\n  const groupRef: React.RefCallback<Group> = useCallback(\n    (group) => {\n      if (group && postModelRender) {\n        postModelRender()\n      }\n    },\n    [modelURL],\n  )\n\n  function renderNode(node: Object3D): React.ReactNode {\n    if (isMesh(node)) {\n      return (\n        <mesh\n          name={node.name}\n          key={node.uuid}\n          geometry={node.geometry}\n          material={node.material}\n          position={node.position}\n          rotation={node.rotation}\n        />\n      )\n    } else {\n      return (\n        <group\n          name={node.name}\n          key={node.uuid}\n          position={node.position}\n          rotation={node.rotation}\n          ref={isFlange(node) ? flangeRef : undefined}\n        >\n          {node.children.map(renderNode)}\n        </group>\n      )\n    }\n  }\n\n  return (\n    <group {...props} dispose={null} ref={groupRef}>\n      {renderNode(gltf.scene)}\n    </group>\n  )\n}\n","import * as THREE from \"three\"\n\nexport const applyGhostStyle = (robot: THREE.Group, color: string) => {\n  if (robot.userData.isGhost) return\n\n  robot.traverse((obj) => {\n    if (obj instanceof THREE.Mesh) {\n      if (obj.material instanceof THREE.Material) {\n        obj.material.colorWrite = false\n      }\n\n      // Create a clone of the mesh\n      const depth = obj.clone()\n      const ghost = obj.clone()\n\n      depth.material = new THREE.MeshStandardMaterial({\n        depthTest: true,\n        depthWrite: true,\n        colorWrite: false,\n        polygonOffset: true,\n        polygonOffsetFactor: -1,\n        side: THREE.DoubleSide,\n      })\n      depth.userData.isGhost = true\n\n      // Set the material for the ghost mesh\n      ghost.material = new THREE.MeshStandardMaterial({\n        color: color,\n        opacity: 0.3,\n        depthTest: true,\n        depthWrite: false,\n        transparent: true,\n        polygonOffset: true,\n        polygonOffsetFactor: -2,\n        side: THREE.DoubleSide,\n      })\n      ghost.userData.isGhost = true\n\n      if (obj.parent) {\n        obj.parent.add(depth)\n        obj.parent.add(ghost)\n      }\n    }\n  })\n\n  robot.userData.isGhost = true\n}\n\nexport const removeGhostStyle = (robot: THREE.Group) => {\n  if (!robot.userData.isGhost) return\n\n  const objectsToRemove: THREE.Object3D[] = []\n\n  robot.traverse((obj) => {\n    if (obj instanceof THREE.Mesh) {\n      if (obj.userData?.isGhost) {\n        objectsToRemove.push(obj)\n      } else if (obj.material instanceof THREE.Material) {\n        obj.material.colorWrite = true\n      }\n    }\n  })\n\n  objectsToRemove.forEach((obj) => {\n    if (obj.parent) {\n      obj.parent.remove(obj)\n    }\n  })\n\n  robot.userData.isGhost = false\n}\n","import type { ThreeElements } from \"@react-three/fiber\"\nimport type { DHParameter, MotionGroupState } from \"@wandelbots/nova-js/v2\"\nimport { Suspense, useCallback, useEffect, useState } from \"react\"\nimport { DHRobot } from \"./DHRobot\"\n\nimport { ErrorBoundary } from \"react-error-boundary\"\nimport type * as THREE from \"three\"\nimport { externalizeComponent } from \"../../externalizeComponent\"\nimport ConsoleFilter from \"../ConsoleFilter\"\nimport { GenericRobot } from \"./GenericRobot\"\nimport RobotAnimator from \"./RobotAnimator\"\nimport { applyGhostStyle, removeGhostStyle } from \"./ghostStyle\"\nimport { defaultGetModel } from \"./robotModelLogic\"\n\nexport type DHRobotProps = {\n  rapidlyChangingMotionState: MotionGroupState\n  dhParameters: Array<DHParameter>\n} & ThreeElements[\"group\"]\n\nexport type SupportedRobotProps = {\n  rapidlyChangingMotionState: MotionGroupState\n  modelFromController: string\n  dhParameters: DHParameter[]\n  flangeRef?: React.Ref<THREE.Group>\n  getModel?: (modelFromController: string) => string\n  postModelRender?: () => void\n  transparentColor?: string\n} & ThreeElements[\"group\"]\n\nexport const SupportedRobot = externalizeComponent(\n  ({\n    rapidlyChangingMotionState,\n    modelFromController,\n    dhParameters,\n    getModel = defaultGetModel,\n    flangeRef,\n    postModelRender,\n    transparentColor,\n    ...props\n  }: SupportedRobotProps) => {\n    const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)\n\n    const setRobotRef = useCallback((instance: THREE.Group | null) => {\n      setRobotGroup(instance)\n    }, [])\n\n    useEffect(() => {\n      if (!robotGroup) return\n\n      if (transparentColor) {\n        applyGhostStyle(robotGroup, transparentColor)\n      } else {\n        removeGhostStyle(robotGroup)\n      }\n    }, [robotGroup, transparentColor])\n\n    const dhrobot = (\n      <DHRobot\n        rapidlyChangingMotionState={rapidlyChangingMotionState}\n        dhParameters={dhParameters}\n        {...props}\n      />\n    )\n\n    return (\n      <ErrorBoundary\n        fallback={dhrobot}\n        onError={(err) => {\n          // Missing model; show the fallback for now\n          console.error(err)\n        }}\n      >\n        <Suspense fallback={dhrobot}>\n          <group ref={setRobotRef}>\n            <RobotAnimator\n              rapidlyChangingMotionState={rapidlyChangingMotionState}\n              dhParameters={dhParameters}\n            >\n              <GenericRobot\n                modelURL={getModel(modelFromController)}\n                postModelRender={postModelRender}\n                flangeRef={flangeRef}\n                {...props}\n              />\n            </RobotAnimator>\n          </group>\n        </Suspense>\n        <ConsoleFilter />\n      </ErrorBoundary>\n    )\n  },\n)\n","import type { ThreeElements } from \"@react-three/fiber\"\n\nimport type { Group } from \"three\"\nimport type { ConnectedMotionGroup } from \"../../lib/ConnectedMotionGroup\"\nimport { defaultGetModel } from \"./robotModelLogic\"\nimport { SupportedRobot } from \"./SupportedRobot\"\n\nexport type RobotProps = {\n  connectedMotionGroup: ConnectedMotionGroup\n  getModel?: (modelFromController: string) => string\n  flangeRef?: React.Ref<Group>\n  transparentColor?: string\n  postModelRender?: () => void\n} & ThreeElements[\"group\"]\n\n/**\n * The Robot component is a wrapper around the SupportedRobot component\n * for usage with @wandelbots/nova-js ConnectedMotionGroup object.\n *\n * @param {RobotProps} props - The properties for the Robot component.\n * @param {ConnectedMotionGroup} props.connectedMotionGroup - The connected motion group containing motion state and parameters.\n * @param {Function} [props.getModel=defaultGetModel] - Optional function to get the model URL. Defaults to defaultGetModel.\n * @param {Object} props - Additional properties passed to the SupportedRobot component.\n *\n * @returns {JSX.Element} The rendered SupportedRobot component.\n */\nexport function Robot({\n  connectedMotionGroup,\n  getModel = defaultGetModel,\n  flangeRef,\n  transparentColor,\n  postModelRender,\n  ...props\n}: RobotProps) {\n  if (!connectedMotionGroup.dhParameters) {\n    return null\n  }\n\n  return (\n    <SupportedRobot\n      rapidlyChangingMotionState={\n        connectedMotionGroup.rapidlyChangingMotionState\n      }\n      modelFromController={connectedMotionGroup.modelFromController || \"\"}\n      dhParameters={connectedMotionGroup.dhParameters}\n      getModel={getModel}\n      flangeRef={flangeRef}\n      transparentColor={transparentColor}\n      postModelRender={postModelRender}\n      {...props}\n    />\n  )\n}\n","import { Box, Button, Card, Divider, Typography, useTheme } from \"@mui/material\"\nimport { Bounds } from \"@react-three/drei\"\nimport { Canvas } from \"@react-three/fiber\"\nimport type { OperationMode, SafetyStateType } from \"@wandelbots/nova-js/v2\"\nimport { observer } from \"mobx-react-lite\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useTranslation } from \"react-i18next\"\nimport type { Group } from \"three\"\nimport { externalizeComponent } from \"../externalizeComponent\"\nimport type { ConnectedMotionGroup } from \"../lib/ConnectedMotionGroup\"\nimport { PresetEnvironment } from \"./3d-viewport/PresetEnvironment\"\nimport type { ProgramState } from \"./ProgramControl\"\nimport { ProgramStateIndicator } from \"./ProgramStateIndicator\"\nimport { Robot } from \"./robots/Robot\"\n\nexport interface RobotCardProps {\n  /** Name of the robot displayed at the top */\n  robotName: string\n  /** Current program state */\n  programState: ProgramState\n  /** Current safety state of the robot controller */\n  safetyState: SafetyStateType\n  /** Current operation mode of the robot controller */\n  operationMode: OperationMode\n  /** Whether the \"Drive to Home\" button should be enabled */\n  driveToHomeEnabled?: boolean\n  /** Callback fired when \"Drive to Home\" button is pressed */\n  onDriveToHomePress?: () => void\n  /** Callback fired when \"Drive to Home\" button is released */\n  onDriveToHomeRelease?: () => void\n  /**\n   * Callback fired when \"Drive to Home\" button is pressed, with the default home position.\n   * If provided, this will be called instead of onDriveToHomePress, providing the recommended\n   * home position joint configuration based on the robot manufacturer.\n   */\n  onDriveToHomePressWithConfig?: (homePosition: number[]) => void\n  /**\n   * Callback fired when \"Drive to Home\" button is released after using onDriveToHomePressWithConfig.\n   * If provided, this will be called instead of onDriveToHomeRelease.\n   */\n  onDriveToHomeReleaseWithConfig?: () => void\n  /**\n   * Custom default joint configuration to use if manufacturer-based defaults are not available.\n   * Joint values should be in radians.\n   */\n  defaultJointConfig?: number[]\n  /** Connected motion group for the robot */\n  connectedMotionGroup: ConnectedMotionGroup\n  /** Custom robot component to render (optional, defaults to Robot) */\n  robotComponent?: React.ComponentType<{\n    connectedMotionGroup: ConnectedMotionGroup\n    flangeRef?: React.Ref<Group>\n    postModelRender?: () => void\n    transparentColor?: string\n    getModel?: (modelFromController: string) => string\n  }>\n  /** Custom component to render in the content area (optional) */\n  customContentComponent?: React.ComponentType<Record<string, unknown>>\n  /** Additional CSS class name */\n  className?: string\n}\n\n/**\n * A responsive card component that displays a 3D robot with states and controls.\n * The card automatically adapts to its container's size and aspect ratio.\n *\n * Features:\n * - Fully responsive Material-UI Card that adapts to container dimensions\n * - Automatic layout switching based on aspect ratio:\n *   - Portrait mode: Vertical layout with robot in center\n *   - Landscape mode: Horizontal layout with robot on left, content on right (left-aligned)\n * - Responsive 3D robot rendering:\n *   - Scales dynamically with container size\n *   - Hides at very small sizes to preserve usability\n *   - Adaptive margin based on available space\n * - Smart spacing and padding that reduces at smaller sizes\n * - Minimum size constraints for usability while maximizing content density\n * - Robot name displayed in Typography h6 at top-left\n * - Program state indicator below the name\n * - Auto-fitting 3D robot model that scales with container size\n * - Customizable content area for displaying custom React components\n * - Transparent gray divider line\n * - \"Drive to Home\" button with press-and-hold functionality\n * - Localization support via react-i18next\n * - Material-UI theming integration\n *\n * Usage with custom content:\n * ```tsx\n * // Example custom timer component\n * const CustomTimer = () => (\n *   <Box>\n *     <Typography variant=\"body1\" sx={{ color: \"text.secondary\" }}>\n *       Runtime\n *     </Typography>\n *     <Typography variant=\"h6\">05:23</Typography>\n *   </Box>\n * )\n *\n * <RobotCard\n *   robotName=\"UR5e Robot\"\n *   programState={ProgramState.RUNNING}\n *   customContentComponent={CustomTimer}\n *   // ... other props\n * />\n * ```\n */\nexport const RobotCard = externalizeComponent(\n  observer(\n    ({\n      robotName,\n      programState,\n      safetyState,\n      operationMode,\n      driveToHomeEnabled = false,\n      onDriveToHomePress,\n      onDriveToHomeRelease,\n      connectedMotionGroup,\n      robotComponent: RobotComponent = Robot,\n      customContentComponent: CustomContentComponent,\n      className,\n    }: RobotCardProps) => {\n      const theme = useTheme()\n      const { t } = useTranslation()\n      const [isDriveToHomePressed, setIsDriveToHomePressed] = useState(false)\n      const driveButtonRef = useRef<HTMLButtonElement>(null)\n      const cardRef = useRef<HTMLDivElement>(null)\n      const [isLandscape, setIsLandscape] = useState(false)\n      const [cardSize, setCardSize] = useState<{\n        width: number\n        height: number\n      }>({ width: 400, height: 600 })\n      const [modelRenderTrigger, setModelRenderTrigger] = useState(0)\n\n      // Hook to detect aspect ratio and size changes\n      useEffect(() => {\n        const checkDimensions = () => {\n          if (cardRef.current) {\n            const { offsetWidth, offsetHeight } = cardRef.current\n            setIsLandscape(offsetWidth > offsetHeight)\n            setCardSize({ width: offsetWidth, height: offsetHeight })\n          }\n        }\n\n        // Initial check\n        checkDimensions()\n\n        // Set up ResizeObserver to watch for size changes\n        const resizeObserver = new ResizeObserver(checkDimensions)\n        if (cardRef.current) {\n          resizeObserver.observe(cardRef.current)\n        }\n\n        return () => {\n          resizeObserver.disconnect()\n        }\n      }, [])\n\n      const handleModelRender = useCallback(() => {\n        // Trigger bounds refresh when model renders\n        setModelRenderTrigger((prev) => prev + 1)\n      }, [])\n\n      const handleDriveToHomeMouseDown = useCallback(() => {\n        if (!driveToHomeEnabled || !onDriveToHomePress) return\n        setIsDriveToHomePressed(true)\n        onDriveToHomePress()\n      }, [driveToHomeEnabled, onDriveToHomePress])\n\n      const handleDriveToHomeMouseUp = useCallback(() => {\n        if (!driveToHomeEnabled || !onDriveToHomeRelease) return\n        setIsDriveToHomePressed(false)\n        onDriveToHomeRelease()\n      }, [driveToHomeEnabled, onDriveToHomeRelease])\n\n      const handleDriveToHomeMouseLeave = useCallback(() => {\n        if (isDriveToHomePressed && onDriveToHomeRelease) {\n          setIsDriveToHomePressed(false)\n          onDriveToHomeRelease()\n        }\n      }, [isDriveToHomePressed, onDriveToHomeRelease])\n\n      // Determine if robot should be hidden at small sizes to save space\n      const shouldHideRobot = isLandscape\n        ? cardSize.width < 350\n        : cardSize.height < 200 // Hide robot at height < 200px in portrait\n\n      // Determine if custom content should be hidden when height is too low\n      // Custom content should be hidden BEFORE the robot (at higher threshold)\n      const shouldHideCustomContent = isLandscape\n        ? cardSize.height < 310 // Landscape: hide custom content at height < 310px\n        : cardSize.height < 450 // Portrait: hide custom content at height < 450px\n\n      return (\n        <Card\n          ref={cardRef}\n          className={className}\n          sx={{\n            width: \"100%\",\n            height: \"100%\",\n            display: \"flex\",\n            flexDirection: isLandscape ? \"row\" : \"column\",\n            position: \"relative\",\n            overflow: \"hidden\",\n            minWidth: { xs: 180, sm: 220, md: 250 },\n            minHeight: isLandscape\n              ? { xs: 200, sm: 240, md: 260 } // Allow runtime hiding at < 283px\n              : { xs: 150, sm: 180, md: 220 }, // Allow progressive hiding in portrait mode\n            border: `1px solid ${theme.palette.divider}`,\n            borderRadius: \"18px\",\n            boxShadow: \"none\",\n            backgroundColor:\n              theme.palette.backgroundPaperElevation?.[8] || \"#2A2A3F\",\n            backgroundImage: \"none\", // Override any gradient from elevation\n          }}\n        >\n          {isLandscape ? (\n            <>\n              {/* Landscape Layout: Robot on left, content on right */}\n              <Box\n                sx={{\n                  flex: \"0 0 50%\",\n                  position: \"relative\",\n                  height: \"100%\",\n                  minHeight: \"100%\",\n                  maxHeight: \"100%\",\n                  borderRadius: 1,\n                  m: { xs: 1.5, sm: 2, md: 3 },\n                  mr: { xs: 0.75, sm: 1, md: 1.5 },\n                  overflow: \"hidden\", // Prevent content from affecting container size\n                  display: shouldHideRobot ? \"none\" : \"block\",\n                }}\n              >\n                {!shouldHideRobot && (\n                  <Canvas\n                    orthographic\n                    camera={{\n                      position: [3, 2, 3],\n                      zoom: 1,\n                    }}\n                    shadows\n                    frameloop=\"demand\"\n                    style={{\n                      borderRadius: theme.shape.borderRadius,\n                      width: \"100%\",\n                      height: \"100%\",\n                      background: \"transparent\",\n                      position: \"absolute\",\n                      top: 0,\n                      left: 0,\n                    }}\n                    dpr={[1, 2]}\n                    gl={{ alpha: true, antialias: true }}\n                  >\n                    <PresetEnvironment />\n                    <Bounds fit observe margin={1} maxDuration={1}>\n                      <RobotComponent\n                        connectedMotionGroup={connectedMotionGroup}\n                        postModelRender={handleModelRender}\n                      />\n                    </Bounds>\n                  </Canvas>\n                )}\n              </Box>\n\n              {/* Content container on right */}\n              <Box\n                sx={{\n                  flex: shouldHideRobot ? \"1\" : \"1\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  justifyContent: \"flex-start\",\n                  width: shouldHideRobot ? \"100%\" : \"50%\",\n                }}\n              >\n                {/* Header section with robot name and program state */}\n                <Box\n                  sx={{\n                    p: { xs: 1.5, sm: 2, md: 3 },\n                    pb: { xs: 1, sm: 1.5, md: 2 },\n                    textAlign: \"left\",\n                  }}\n                >\n                  <Typography variant=\"h6\" component=\"h2\" sx={{ mb: 1 }}>\n                    {robotName}\n                  </Typography>\n                  <ProgramStateIndicator\n                    programState={programState}\n                    safetyState={safetyState}\n                    operationMode={operationMode}\n                  />\n                </Box>\n\n                {/* Bottom section with custom content and button */}\n                <Box\n                  sx={{\n                    p: { xs: 1.5, sm: 2, md: 3 },\n                    pt: 0,\n                    flex: \"1\",\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    justifyContent: \"space-between\",\n                  }}\n                >\n                  {/* Custom content section - hidden if height is too low in landscape mode */}\n                  {!shouldHideCustomContent && CustomContentComponent && (\n                    <Box>\n                      <CustomContentComponent />\n\n                      {/* Divider */}\n                      <Divider\n                        sx={{\n                          mt: 1,\n                          mb: 0,\n                          borderColor: theme.palette.divider,\n                          opacity: 0.5,\n                        }}\n                      />\n                    </Box>\n                  )}\n\n                  <Box\n                    sx={{\n                      mt:\n                        !shouldHideCustomContent && CustomContentComponent\n                          ? \"auto\"\n                          : 0,\n                    }}\n                  >\n                    {/* Drive to Home button with some space */}\n                    <Box\n                      sx={{\n                        display: \"flex\",\n                        justifyContent: \"flex-start\",\n                        mt: { xs: 1, sm: 1.5, md: 2 },\n                        mb: { xs: 0.5, sm: 0.75, md: 1 },\n                      }}\n                    >\n                      <Button\n                        ref={driveButtonRef}\n                        variant=\"contained\"\n                        color=\"secondary\"\n                        size=\"small\"\n                        disabled={!driveToHomeEnabled}\n                        onMouseDown={handleDriveToHomeMouseDown}\n                        onMouseUp={handleDriveToHomeMouseUp}\n                        onMouseLeave={handleDriveToHomeMouseLeave}\n                        onTouchStart={handleDriveToHomeMouseDown}\n                        onTouchEnd={handleDriveToHomeMouseUp}\n                        sx={{\n                          textTransform: \"none\",\n                          px: 1.5,\n                          py: 0.5,\n                        }}\n                      >\n                        {t(\"RobotCard.DriveToHome.bt\")}\n                      </Button>\n                    </Box>\n                  </Box>\n                </Box>\n              </Box>\n            </>\n          ) : (\n            <>\n              {/* Portrait Layout: Header, Robot, Footer */}\n              <Box\n                sx={{\n                  p: 3,\n                  height: \"100%\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                }}\n              >\n                {/* Header section with robot name and program state */}\n                <Box>\n                  <Typography variant=\"h6\" component=\"h2\" sx={{ mb: 1 }}>\n                    {robotName}\n                  </Typography>\n                  <ProgramStateIndicator\n                    programState={programState}\n                    safetyState={safetyState}\n                    operationMode={operationMode}\n                  />\n                </Box>\n\n                {/* 3D Robot viewport in center */}\n                <Box\n                  sx={{\n                    flex: shouldHideRobot ? 0 : 1,\n                    position: \"relative\",\n                    minHeight: shouldHideRobot\n                      ? 0\n                      : { xs: 120, sm: 150, md: 200 },\n                    height: shouldHideRobot ? 0 : \"auto\",\n                    borderRadius: 1,\n                    overflow: \"hidden\",\n                    display: shouldHideRobot ? \"none\" : \"block\",\n                  }}\n                >\n                  {!shouldHideRobot && (\n                    <Canvas\n                      orthographic\n                      camera={{\n                        position: [3, 2, 3],\n                        zoom: 1,\n                      }}\n                      shadows\n                      frameloop=\"demand\"\n                      style={{\n                        borderRadius: theme.shape.borderRadius,\n                        width: \"100%\",\n                        height: \"100%\",\n                        background: \"transparent\",\n                        position: \"absolute\",\n                      }}\n                      dpr={[1, 2]}\n                      gl={{ alpha: true, antialias: true }}\n                    >\n                      <PresetEnvironment />\n                      <Bounds fit clip observe margin={1} maxDuration={1}>\n                        <RobotComponent\n                          connectedMotionGroup={connectedMotionGroup}\n                          postModelRender={handleModelRender}\n                        />\n                      </Bounds>\n                    </Canvas>\n                  )}\n                </Box>\n\n                {/* Bottom section with custom content and button */}\n                <Box>\n                  {/* Custom content section - hidden if height is too low */}\n                  {!shouldHideCustomContent && CustomContentComponent && (\n                    <>\n                      <CustomContentComponent />\n\n                      {/* Divider */}\n                      <Divider\n                        sx={{\n                          mt: 1,\n                          mb: 0,\n                          borderColor: theme.palette.divider,\n                          opacity: 0.5,\n                        }}\n                      />\n                    </>\n                  )}\n\n                  {/* Drive to Home button with some space */}\n                  <Box\n                    sx={{\n                      display: \"flex\",\n                      justifyContent: \"flex-start\",\n                      mt:\n                        !shouldHideCustomContent && CustomContentComponent\n                          ? { xs: 1, sm: 2, md: 5 }\n                          : { xs: 0.5, sm: 1, md: 2 },\n                      mb: { xs: 0.5, sm: 0.75, md: 1 },\n                    }}\n                  >\n                    <Button\n                      ref={driveButtonRef}\n                      variant=\"contained\"\n                      color=\"secondary\"\n                      size=\"small\"\n                      disabled={!driveToHomeEnabled}\n                      onMouseDown={handleDriveToHomeMouseDown}\n                      onMouseUp={handleDriveToHomeMouseUp}\n                      onMouseLeave={handleDriveToHomeMouseLeave}\n                      onTouchStart={handleDriveToHomeMouseDown}\n                      onTouchEnd={handleDriveToHomeMouseUp}\n                      sx={{\n                        textTransform: \"none\",\n                        px: 1.5,\n                        py: 0.5,\n                      }}\n