Generated by XState Viz: https://xstate.js.org/viz

machine.js

const lightMachine = Machine({
  id: 'gvg',
  type: 'parallel',
  states: {
    art: {
      initial: 'green',
      states: {
        green: {
          after: {
            2000: 'red',
          }
        },
        red: {
          after: {
            2000: 'blue'
          }
        },
        blue: {
          after: {
            2000: 'green',
          }
        },
        black: {}
      }
    },
    app: {
      initial: 'hidden',
      states: {
        hidden: {
          on: {
            TAP: 'bottom'
          }
        },
        bottom: {
          after: {
            2000: 'hidden'
          },
          on: {
            HIDE: 'hidden',
            OPEN: 'full',
          }
        },
        full: {
          on: {
            HIDE: 'hidden'
          }
        },
        sleep: {
          initial: 'waiting',
          states: {
            waiting: {
              after: {
                5000: 'sleeping',
              },
              on: {
                SLEEPING: 'sleeping',
              }
            },
            sleeping: {}
          }
        },
        settings: {},
      }
    }
  },
  on: {
    SLEEP: {
      target: ['.app.sleep', '.art.black']
    },
    SETTINGS: {
      target: ['.app.settings', '.art.black']
    },
    CLOSE: {
      target: ['.art.green', 'app.hidden']
    }
  }
});