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

machine.js

const displayMachine = Machine(
  {
    initial: "hidden",
    states: {
      hidden: {
        on: {
          TURN_ON: "visible",
        },
      },
      visible: {
        type: "parallel",
        on: {
          TURN_OFF: "hidden",
        },
        states: {
          mode: {
            initial: "light",
            states: {
              light: {
                on: {
                  SWITCH: "dark",
                },
              },
              dark: {
                on: {
                  SWITCH: "light",
                },
              },
            },
          },
          brightness: {
            initial: "bright",
            states: {
              bright: {
                after: {
                  TIMEOUT: "dim",
                },
              },
              dim: {
                on: {
                  SWITCH: "bright",
                },
              },
            },
          },
        },
      },
    },
  },
  {
    delays: {
      TIMEOUT: 5000,
    },
  }
);