// in order to debug it would be better to create simple component with a simple color background like RedBackground, BlueBackground, etc

// from this layout we should be able to redraw something like

const layout = {
  layout: {
    id: "hxulp",
    component: "SplitPane",
    orientation: "horizontal",
    children: [
      {
        id: "ala44",
        size: 3, // this is the size of the left part based on 'flex'
        component: "SplitPane",
        orientation: "vertical",
        children: [
          {
            id: "sdaf",
            component: "VioletBackground",
          },
          {
            id: "oroc",
            component: "PinkBackground",
          },
        ],
      },
      {
        id: "8hyk",
        size: 1,
        component: "Accordeon",
        children: [
          {
            id: "iuvv",
            component: "BlueBackground",
            isOpen: true,
          },
          {
            id: "59qh",
            component: "GreenBackground",
            isOpen: true,
          },
          {
            id: "mt5q",
            component: "YellowBackground",
            isOpen: false,
          },
        ],
      },
    ],
  },
};