Button

SketchSystems.spec

Button
  Disabled
    enable -> Enabled
  
  Enabled*
    disable -> Disabled
    Inactive
      focus -> Active
      mouseEnter -> Hovered
    
    Active
      blur -> Inactive
      mouseEnter -> ActiveHovered
      pressEnter -> Active

    Hovered
      mouseLeave -> Inactive
      focus -> ActiveHovered
      click -> Hovered

    ActiveHovered
      mouseLeave -> Active
      blur -> Hovered
      click -> ActiveHovered
      pressEnter -> ActiveHovered

SketchSystems_prototype.js

function render(model){
  const enabled = model.active_states[0].name !== 'Disabled'
  
  return button('Button', enabled, false, false);
}

function button(text, enabled, active, hovered) {
  return $('div', {
    style: {
      display: 'inline-block',
      padding: '5px 8px',
      'background-color': enabled ? 'green' : 'red'
    }
  }, text);
}