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",
      states: {
        on: {
          TURN_OFF: "hidden",
        },
        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,
  },
});