[XState] Parallel State and deep history state

const displayMachine = createMachine(
  {
    initial: "hidden",
    states: {
      hidden: {
        on: {
          TURN_ON: "visible.hist",
        },
      },
      visible: {
        // Add parallel states here for:
        type: "parallel",
        states: {
          hist: {
            type: "history",
            history: "deep",
          },
          // - mode (light or dark)
          mode: {
            initial: "light",
            states: {
              light: {
                on: {
                  SWITCH: {
                    target: "dark",
                  },
                },
              },
              dark: {
                on: {
                  SWITCH: {
                    target: "light",
                  },
                },
              },
            },
          },
          // - brightness (bright or dim)
          brightness: {
            initial: "bright",
            states: {
              bright: {
                after: {
                  TIMEOUT: {
                    target: "dim",
                  },
                },
              },
              dim: {
                on: {
                  SWITCH: "bright",
                },
              },
            },
          },
        },
        on: {
          TURN_OFF: "hidden",
        },
        // See the README for how the child states of each of those
        // parallel states should transition between each other.
      },
    },
  },
  {
    delays: {
      TIMEOUT: 2000,
    },
  }
);