// The UI automatically gets created and appended to DOM,

// and dbgui() returns a singleton interface to it


// dbgui operates on a simple key-value system,

// sort of like a hashmap.

dbgui()
     // .add creates a new entry in the UI.
     // $button creates a widget, which is an interactive input that may be used to interface with your code.
     .add("Key", $button("Widget"))

      // Keys are unique and are automatically sorted in the UI
     .add("Key", $input()) // This replaces the button created above with a text input widget.
     .add("J", null) // This creates a new entry in the UI before Key, since J is less than K in ASCII/Unicode
     .add("Key", null) // a null widget simply removes the entry from the UI (if it exists). The UI is now empty.

      // To interface with your code, widgets have event listeners that can accept callbacks:
     .add(
         "Button",
         $button("Click me!")
             .onClick(() =>gt; {
                 alert("Hi!");
             })
     );
     // Note how everything is chainable, which means you can do this:
     .add(
         "Button",
         $button("Click me!")
             .onClick(() =>gt; { alert("Hi!") })
             .onClick(() =>gt; { alert("Hey!") })
             .onClick(() =>gt; { alert("Hello!") })
             // clicking this would now spawn 3 alerts
     )
     // similarly, text inputs also have events:
     .add("Text Input", $text()/* $text is an alias of $input */
         // onChange callback gets called when the text content changes (from typing, deleting, pasting, etc.)
         .onChange((value) =>gt; {
             console.log("User changed the text input's value to be: " + value);
         })
         // onInput callback gets called when Enter key gets pressed
         .onInput((value) =>gt; {
             console.log("User submitted: " + value);
         })
     )


// To help with grouping and organization, there are also categories:

dbgui().in("Example Category")
     // and the API is still the exact same!
     .add("Key", $button("Widget").onClick(() =>gt; {
         // category names are also unique, so you can
         // freely replace components in categories as well
         dbgui().in("Example Category").add("Key", $text());
     }));
     // $slider/$range creates a slider input
     // which accepts a min, max, and step value.
     // Also has .onInput() and .onChange() events
     .add("Abc", $slider(0, 100, 1));
     .add("Remove Abc", $button("Remove")
         .onClick(() =>gt; {
             // dbgui().addIn(category, key, widget)
             // is shorthand for
             // dbgui().in(category).add(key, widget)

              dbgui().addIn("Example Category", "Abc", null); // removes Abc
         })
     )

// note that sub-categories are not supported: `dbgui().in("A").in("B")` does not work


// There's a bit more widgets that we offer, but that's it!