Customer Input Machine

SketchSystems.spec

Customer Input Machine
  empty*
    INPUT -> autocompleting
  autocompleting
    INPUT -> autocompleting
    BLUR_WITH_EMPTY_TEXT -> empty
    BLUR_WITH_TEXT -> customerBlurTypePrompt
    SELECTION -> idle
    CREATE -> idle
  customerBlurTypePrompt
    DISMISS -> autocompleting
    DO_NOT_CREATE -> empty
    CREATE -> idle
  idle
    REMOVE -> empty
    CLICK -> customerChangeTypePrompt
  customerChangeTypePrompt
    DISMISS -> idle
    CHANGE -> autocompleting
    EDIT -> edit
  edit
    BLUR_NAME -> idle

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