Does this library support collapsing and grouping? about control-panel HOT 6 OPEN

import {Panel, Number, Color, Group} from 'control-panel'

...
<Panel theme={'black'}>
  <Group title="Coordinate" collapsed>
    <Number id="x" min={-100} max={100} />
    <Number id="y" min={-100} max={100} />
  </Group>
  
  <Color value="#abcdef"/>
</Panel>

require('control-panel')([
  {type: 'number', label: '...'},
]).on('input', ...);

// Should this get mutated directly? It's actually rather convenient to just
// access state properties directly. Otherwise I *always* have to run
// Object.assign(state, newState) in the event handler with a bunch
// of checks for particular changes
var myState = {
  x: 5,
  y: 7
};

var panel = controlPanel(myState, [
  {
    type:  'group',
    title: 'Coordainate',
    collapsed: true,
    fields: [
      // If we pass a state object, you don't need `initial` anymore, which is
      // pattern you *always* have to use that gets really tiresome.
      {type: 'Number', id: "x", label: "x", min: -100, max: 100},
      {type: 'Number', id: "y", label: "y", min: -100, max: 100},
    ]
  },
  {type: 'color', value: '#abcdef'}
], {
  theme: 'black'
}).on('input', function (newState, previousState) {
  // live changes as you, say, drag a slider. Note though that maybe you
  // don't even need this callback if we mutate the input object for
  // convenience. This callback would instead be for performing actions
  // on *particular* changes
}).on('inputend', function (newState, previousState) {
  // at the end of an input event since some things need live updates
  // while other things are too expensive for that?
})

// Change the fields. For example, you could remove a field. Each field
// should probably have a visible attribute so you can simply hide it and
// set the fields
panel.setFields({
  // totally new fields?
});

// An issue I've had is feeding changes back in. An example is:
// https://rreusser.github.io/demos/double-pendulum/
// You don't want to know what I had to do to get the preset menu to work…
panel.setState({
  x: ...,
  y: ...,
});

import {Number} from 'control-panel'

controlPanel(myState, [
  <Number min=10 max=20 id="x"/>,
  {type: 'number', id: 'y', min: 10, max: 20}
])