vectojs-devtoolslisted
Install: claude install-skill vectojs/vectojs-skills
# VectoJS Devtools (@vectojs/devtools, 0.4.1+)
An in-page Virtual Math Tree inspector plus a headless audit/capture layer.
The panel itself is a VectoJS Scene (dogfooding `@vectojs/ui`), docked to the
right edge of the page. Peer deps: `@vectojs/core >=1.0.0`, `@vectojs/ui >=1.0.0`.
## Attach / detach
```ts
import { attachDevtools } from "@vectojs/devtools";
const devtools = attachDevtools(scene, {
width: 340, // panel width px (default 340)
refreshInterval: 500, // auto-refresh ms while open; 0 disables (default 500)
traceEvents: true, // opt-in pointer/wheel/keyboard routing trace
dockSide: "right", // 'right' | 'left' (0.5.0; default 'right')
showPerf: true, // live perf HUD strip reading Scene.frameStats (0.5.0)
defaultTab: "tree", // 'tree' | 'inspect' | 'audit' | 'events' | 'settings' (0.5.0)
});
// …
devtools.detach(); // alias for panel.destroy(); always call on unmount
```
`attachDevtools` returns the `DevtoolsPanel`. One instance per inspected Scene.
## What the panel gives you
Since **0.5.0** the panel is a modern glass dock (rounded corners, shadow,
`Card`-grouped sections) organized into **tabs** (`Tree · Info · Audit · Log ·
⚙`), with a header of three ghost text-glyph icon buttons (`⌖` pick / `⟳`
refresh / `⚠` audit) and count badges (total / interactive⚡ / findings⚠).
- **Entity tree (`Tree` tab)** — live VMT view built from `scene.rootEntity` /
`scene.overlayRootEntity`. Labels show `type (x,y) w×h` plus ⚡ (interactive)
and ▶ (animatin