Tag Input

SketchSystems.spec

Tag Input
  Inactive*
    activate -> Active

  Active    
    deactivate -> Inactive

    # Serial editing of tag list
    Normal mode*
      adding a tag -> Suggestions?
      add tag to end of list -> Add tag?
      remove tag from end of list -> Delete tag?
      activate Text mode -> Text mode

      Suggestions?
        select suggestion -> Add tag?

    # Text editing of tag list as csv
    Text mode
      update all the tags -> Update tags?
      cancel -> Normal mode
    
  Add tag?
    added tag to list of tags -> Active
    there was a problem -> Problem?
    
  Delete tag?
    removed tag from list of tags -> Active
    no tags noop -> Active
    
  Update tags?
    update the tag list -> Active
    remove all tags -> Active
      
  Problem?

SketchSystems_prototype.js

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