@nbt-dev/devtools 0.0.10 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -6
- package/dist/components/devtools/portal-container.d.ts +1 -0
- package/dist/index.js +26 -25
- package/dist/index.js.map +4 -4
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -28,11 +28,10 @@ npm install @nbt-dev/devtools
|
|
|
28
28
|
|
|
29
29
|
## Usage
|
|
30
30
|
|
|
31
|
-
Mount the panel once near your app root
|
|
31
|
+
Mount the panel once near your app root — that's it, no stylesheet import:
|
|
32
32
|
|
|
33
33
|
```tsx
|
|
34
34
|
import { NimbitDevTools } from "@nbt-dev/devtools";
|
|
35
|
-
import "@nbt-dev/devtools/styles.css";
|
|
36
35
|
|
|
37
36
|
export default function App() {
|
|
38
37
|
return (
|
|
@@ -62,10 +61,14 @@ banner). Render it inside a client boundary / your root layout's client tree.
|
|
|
62
61
|
|
|
63
62
|
## Styling
|
|
64
63
|
|
|
65
|
-
The
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
The panel mounts inside its own **shadow root** attached to `<body>`, with its
|
|
65
|
+
stylesheet injected into that shadow root. Nothing leaks in or out: the host
|
|
66
|
+
app's CSS (and theme/`<html>` font-size) can't reach the panel, and the panel's
|
|
67
|
+
styles can't touch the host. Sizing is pinned to absolute pixels, so the panel
|
|
68
|
+
renders identically no matter how the host themes its document.
|
|
69
|
+
|
|
70
|
+
The standalone `@nbt-dev/devtools/styles.css` export is still published for
|
|
71
|
+
advanced/manual mounting, but is **not** needed for normal usage.
|
|
69
72
|
|
|
70
73
|
## API
|
|
71
74
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PortalContainerContext: import("react").Context<HTMLElement | null>;
|