doc-synchronizer

SketchSystems.spec

doc-synchronizer
  stop -> user_disconnected
  restart -> initializing
  refresh_token -> getting_token
  error -> error
  initializing
    getting_token
      not_authenticated
        authenticate -> authenticating
      authenticating
        authenticated -> connecting
        authentication failed -> authentication failed    
      got_token -> connecting
  connecting
    connected -> connected
    error -> connection_error
    waiting_to_connect
      connection_timeout_exceeded -> connection_timeout_exceeded
    connection_timeout_exceeded
  connected
    authorizing
      authorized -> authorized
      unauthorized -> unauthorized
    authorized
      syncable
        start_syncing -> syncing
      syncing&
        recent_changes
          syncing_recent_changes&
            done_syncing_recent_changes -> loaded
            recent_remote_changes
              pulling_latest
                pulled_latest -> pulled_latest
              pulled_latest
            recent_local_edits
              pushing_edits
                pushed_edits -> pushed_edits
              pushed_edits
          loaded
        syncing_live_changes&
          local_changes
            no_local_changes
              has_local_changes -> has_local_changes
            has_local_changes
              send_local_changes -> sending_local_changes
            sending_local_changes
              done -> no_local_changes
              cancel -> has_local_changes
              
          remote_live_changes
            subscribing_remote_changes
              subscribed -> remote_changes_idle
            receiving_remote_changes
              done -> remote_changes_idle
            remote_changes_idle
              receive -> receiving_remote_changes
   stopped
    connection_error
    authentication failed
    unauthorized
    remote_disconnected
    user_disconnected
    error

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