IMS

SketchSystems.spec

IMS
  Left Panel
    tabs
      tab item*
        return -> Table Screen
        escape -> tab item
        up -> tab item
        down -> tab item
        

    reports
      report item*
       return -> Reports_List
    

  Table Screen
    table empty?*
      empty -> add
      not empty -> table
    add
      return -> Forms
      escape -> tabs
    table
      row
        escape -> Left Panel
        return -> Forms
        delete -> table
        cell
          up -> row
          down -> row



  Forms
    escape -> Left Panel
    form*
      return__valid_form_field -> form
      return__dependency_in_next_field -> dropdown
      return__all_fields_valid -> submit_btn
      
    submit_btn
      return -> form

    secondary_form
      return__valid_form_field -> secondary_form
      return__dependency_in_next_field -> dropdown
      return__all_fields_valid -> submit_btn
      ctrl_up -> form
      ctrl_down -> form
    
    dropdown
      select -> Forms
      ctrl_down -> add_more_btn
      ctrl_up -> add_more_btn

    add_more_btn
      return -> form
    
  Reports_List
    list
      return -> Report_Detail
      escape -> reports
      up -> Reports_List
      down -> Reports_List
    
  Report_Detail
    ctrl p -> Forms
    report_table
      escape -> Reports_List
    

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("li",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}