feat(www playground): add Eruda for devtools panel

[enzonotario]

Adds Eruda as DevTools for Playground.

By default, Eruda is displayed with a fixed position (and can therefore overlap the WC element). To prevent this, it is placed inside an eruda-container and given an absolute position, inside a relative element, so it cannot overlap the WC element. This also makes it possible to position it inside a SplitView component, allowing the size to be adjusted by the User (inspired by Solid Playground).

TODO:

• Inside iframe, the body element does not have dark class, so I didn't find a way to access to Root Body from Iframe context.
• Add an SplitView component, to allows change size and even hide the DevTools.
• Define design considerations. For example, in my custom editor, I decreased the Tabs height; hid the "log type" sub-tabs; and hid the Settings tab:

[aralroca]

About this TODO:

• Inside iframe, the body element does not have dark class, so I didn't find a way to access to Root Body from Iframe context.
• Add an SplitView component, to allows change size and even hide the DevTools.
• Define design considerations. For example, in my custom editor, I decreased the Tabs height; hid the "log type" sub-tabs; and hid the Settings tab:

I agree with you, all these things will be very welcome. Probably more things:

• Display some loading feedback meanwhile Monaco, preview & console are loading
• Type-safe