@nbt-dev/devtools 0.0.9 → 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.
Files changed (10) hide show
  1. package/README.md +16 -8
  2. package/dist/components/devtools/devtools-context.d.ts +14 -0
  3. package/dist/components/devtools/fonts.d.ts +7 -0
  4. package/dist/components/devtools/portal-container.d.ts +1 -0
  5. package/dist/components/ui/button.d.ts +1 -1
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +28 -27
  8. package/dist/index.js.map +4 -4
  9. package/dist/styles.css +1 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -9,6 +9,10 @@ console](https://github.com/nbt-dev). It gives you, against the live daemon:
9
9
  detail
10
10
  - **Diagram** — an entity-relationship graph with live row counts
11
11
  - **Sources** — a dev-mode NBT source editor with diagnostics and apply support
12
+ - **Settings** — General (devtools panel font), Editor (theme, font size, line
13
+ wrapping, tab size) and Integrations (mirror a cartridge into a Google Sheet).
14
+ Preferences persist per operator on the console (server-side), with a
15
+ localStorage fallback for unauthenticated/dev use.
12
16
 
13
17
  It assumes your app uses NBT auth: the data socket reads the current session
14
18
  bearer from `POST /api/auth/session/current` (sent with `credentials:
@@ -24,11 +28,10 @@ npm install @nbt-dev/devtools
24
28
 
25
29
  ## Usage
26
30
 
27
- Mount the panel once near your app root and import the stylesheet once anywhere:
31
+ Mount the panel once near your app root — that's it, no stylesheet import:
28
32
 
29
33
  ```tsx
30
34
  import { NimbitDevTools } from "@nbt-dev/devtools";
31
- import "@nbt-dev/devtools/styles.css";
32
35
 
33
36
  export default function App() {
34
37
  return (
@@ -41,12 +44,12 @@ export default function App() {
41
44
  }
42
45
  ```
43
46
 
44
- The panel renders nothing until toggled. Open/close it from anywhere:
47
+ The panel renders nothing until toggled. It owns the built-in shortcuts
48
+ **Ctrl+F12** and **Ctrl/Cmd+Shift+D**. You can also toggle it from anywhere:
45
49
 
46
50
  ```ts
47
51
  import { toggleDevTools } from "@nbt-dev/devtools";
48
52
 
49
- // e.g. bind to Ctrl+F12
50
53
  toggleDevTools();
51
54
  // or, with no import: window.dispatchEvent(new CustomEvent("devtools-toggle"))
52
55
  ```
@@ -58,10 +61,14 @@ banner). Render it inside a client boundary / your root layout's client tree.
58
61
 
59
62
  ## Styling
60
63
 
61
- The shipped `styles.css` is self-contained and scoped under `.nimbit-devtools`
62
- (the panel + its portalled surfaces). It ships only Tailwind's theme + utilities
63
- layers — no preflight reset — so it never disturbs your app's own styles. Works
64
- with or without Tailwind in the host.
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.
65
72
 
66
73
  ## API
67
74
 
@@ -69,6 +76,7 @@ with or without Tailwind in the host.
69
76
  | --- | --- |
70
77
  | `NimbitDevTools` | The panel. Props: `apiBaseUrl?`, `defaultActiveTab?`. |
71
78
  | `toggleDevTools()` | Dispatches the `devtools-toggle` window event. |
79
+ | `useDevToolsOpen()` | Reactive open/closed state for your own toolbar button — works outside the panel, no provider needed. |
72
80
  | `DevToolsProvider`, `useDevTools` | Lower-level state if you compose `DevTools` yourself. |
73
81
  | `DevToolsConfigProvider`, `useDevToolsConfig` | The `apiBaseUrl` config context. |
74
82
  | `DevTools` | The bare panel (expects the providers above). |
package/dist/components/devtools/devtools-context.d.ts CHANGED
@@ -33,6 +33,8 @@ type DevToolsCtx = {
33
33
  setView: React.Dispatch<React.SetStateAction<DevToolsView>>;
34
34
  graphCarts: Set<string> | null;
35
35
  setGraphCarts: React.Dispatch<React.SetStateAction<Set<string> | null>>;
36
+ revealedCarts: Set<string>;
37
+ setRevealedCarts: React.Dispatch<React.SetStateAction<Set<string>>>;
36
38
  hiddenEntities: Set<string>;
37
39
  setHiddenEntities: React.Dispatch<React.SetStateAction<Set<string>>>;
38
40
  graphLeftW: number;
@@ -49,6 +51,18 @@ type DevToolsCtx = {
49
51
  setSourcesFile: (v: string | null) => void;
50
52
  sourcesTreeW: number;
51
53
  setSourcesTreeW: React.Dispatch<React.SetStateAction<number>>;
54
+ settingsCategory: string;
55
+ setSettingsCategory: (v: string) => void;
56
+ editorTheme: string;
57
+ setEditorTheme: (v: string) => void;
58
+ editorFontSize: number;
59
+ setEditorFontSize: (v: number) => void;
60
+ editorLineWrap: boolean;
61
+ setEditorLineWrap: (v: boolean) => void;
62
+ editorTabSize: number;
63
+ setEditorTabSize: (v: number) => void;
64
+ devtoolsFont: string;
65
+ setDevtoolsFont: (v: string) => void;
52
66
  };
53
67
  export declare const DevToolsProvider: React.FC<{
54
68
  children: React.ReactNode;
package/dist/components/devtools/fonts.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export type DevtoolsFont = {
2
+ id: string;
3
+ label: string;
4
+ stack: string;
5
+ };
6
+ export declare const DEVTOOLS_FONTS: DevtoolsFont[];
7
+ export declare function fontStack(id: string): string;
package/dist/components/devtools/portal-container.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const PortalContainerContext: import("react").Context<HTMLElement | null>;
package/dist/components/ui/button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { type VariantProps } from "class-variance-authority";
3
3
  declare const buttonVariants: (props?: ({
4
- variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
4
+ variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
5
5
  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
6
6
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
7
  declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
package/dist/index.d.ts CHANGED
@@ -6,6 +6,7 @@ export type NimbitDevToolsProps = {
6
6
  export declare const NimbitDevTools: React.FC<NimbitDevToolsProps>;
7
7
  export default NimbitDevTools;
8
8
  export declare function toggleDevTools(): void;
9
+ export declare function useDevToolsOpen(): boolean;
9
10
  export { DevToolsProvider, useDevTools, } from "./components/devtools/devtools-context";
10
11
  export { default as DevTools } from "./components/devtools/dev-tools";
11
12
  export type { DevToolsDock, DevToolsTab, DevToolsSize, } from "./components/devtools/devtools-context";