autocomplete

SketchSystems.spec

autocomplete
  blur
    FOCUS -> focused
  focused
    BLUR -> blur
    MOUSE_CLICK_OUTSIDE -> blur
    CHANGE_TEXT -> focused_match
    match*
      -> list_hidden
            -> list.non_empty; matches
            -> list.empty; doesNotMatch > performThisAction
        list_hidden$
        list
            empty
            non_empty
                ARROW_KEY -> non_empty.selected
                MOUSE_CLICK_ITEM -> autocomplete.focused
                not_selected*
                selected
                  ENTER_KEY -> autocomplete.focused

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}`);
}