debug-panel

> **Note** it's implemented as custom-element with shadow root closed
- [ ] floating panel similar to [PropPanel](https://github.com/sketchpunk/proppanel), [leva](https://leva.pmnd.rs), dat.GUI, imGUI
- [ ] switch to popup/newtab panel if run on mobile device (hover:none and screen
```
- [ ] visual toggle to debug all linked modules in visible viewport
- [ ] debug all linked modules in specific scope
```html

…

```
- [ ] repl on selected modules or scope
- [ ] debug specific module
```html

…

```
- [ ] specify control knobs
```tsx
export default class Counter {
static accessor total
accessor count
increment() {
Counter.total++
this.count++
}
}

import * as panel from "w/debug/panel" // optional

class DebugCounter implements panel.Debug {
static total = accessor => accessor.value = +e.target.value}
>{accessor.name}

count = panel.input({
type: ["range", "number"], // 2x
step: 1,
set(value) { // accessor hook
if (value > 25) console.debug(value)
},
})

increment = fn => {fn.name}
}

export { DebugCounter as "debug-panel" }
```
> 💡**Tips**: use either conditional compilation (debug mode) or empty virtual modules (production mode) to reduce the bundle size.