@nexttrace/devtools 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 (6) hide show
  1. package/README.md +38 -0
  2. package/dist/index.d.mts +108 -0
  3. package/dist/index.d.ts +108 -0
  4. package/dist/index.js +1943 -0
  5. package/dist/index.mjs +1913 -0
  6. package/package.json +51 -0
package/README.md ADDED
@@ -0,0 +1,38 @@
1
+ # @nexttrace/devtools
2
+
3
+ > Standalone React devtools overlay for **NextTrace** — featuring a minimalist launcher button, dockable bottom/right modes, resizable panels, and detached floating window.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ # npm
9
+ npm install --save-dev @nexttrace/devtools @nexttrace/core
10
+
11
+ # pnpm
12
+ pnpm add -D @nexttrace/devtools @nexttrace/core
13
+ ```
14
+
15
+ ## Features
16
+
17
+ - **Minimalist Launcher**: Draggable circular trigger button inspired by TanStack Query & Next.js devtools.
18
+ - **Flexible Placement**: Dock to bottom, dock to right, or detach into an independent floating window with corner resize handles.
19
+ - **Unified Inspector**: Status codes, timing waterfalls, latency breakdown, headers, sanitized payloads, and 1-click cURL copying.
20
+ - **Dark & Light Modes**: High-contrast, meticulously designed developer typography (Inter + JetBrains Mono).
21
+
22
+ ## Usage
23
+
24
+ ```tsx
25
+ import { NextTraceDevTools } from '@nexttrace/devtools';
26
+
27
+ export function App() {
28
+ return (
29
+ <div>
30
+ <NextTraceDevTools defaultPosition="bottom" defaultTheme="dark" />
31
+ </div>
32
+ );
33
+ }
34
+ ```
35
+
36
+ ## License
37
+
38
+ MIT © NextTrace Team
package/dist/index.d.mts ADDED
@@ -0,0 +1,108 @@
1
+ import React from 'react';
2
+ import { NextTraceStore, NextTraceEvent } from '@nexttrace/core';
3
+
4
+ /**
5
+ * Design tokens and styles for NextTrace DevTools
6
+ * Encapsulated CSS-in-JS style objects to ensure complete isolation from host app CSS.
7
+ */
8
+ type DevToolsTheme = 'dark' | 'light';
9
+ declare const tokens: {
10
+ dark: {
11
+ bg: string;
12
+ bgSurface: string;
13
+ bgElevated: string;
14
+ bgHover: string;
15
+ bgActive: string;
16
+ border: string;
17
+ borderMuted: string;
18
+ text: string;
19
+ textMuted: string;
20
+ textDim: string;
21
+ accent: string;
22
+ accentHover: string;
23
+ accentBg: string;
24
+ success: string;
25
+ successBg: string;
26
+ warning: string;
27
+ warningBg: string;
28
+ error: string;
29
+ errorBg: string;
30
+ purple: string;
31
+ purpleBg: string;
32
+ badgeBg: string;
33
+ shadow: string;
34
+ scrollbarThumb: string;
35
+ scrollbarThumbHover: string;
36
+ };
37
+ light: {
38
+ bg: string;
39
+ bgSurface: string;
40
+ bgElevated: string;
41
+ bgHover: string;
42
+ bgActive: string;
43
+ border: string;
44
+ borderMuted: string;
45
+ text: string;
46
+ textMuted: string;
47
+ textDim: string;
48
+ accent: string;
49
+ accentHover: string;
50
+ accentBg: string;
51
+ success: string;
52
+ successBg: string;
53
+ warning: string;
54
+ warningBg: string;
55
+ error: string;
56
+ errorBg: string;
57
+ purple: string;
58
+ purpleBg: string;
59
+ badgeBg: string;
60
+ shadow: string;
61
+ scrollbarThumb: string;
62
+ scrollbarThumbHover: string;
63
+ };
64
+ };
65
+ declare const typography: {
66
+ fontSans: string;
67
+ fontMono: string;
68
+ };
69
+
70
+ type DockPosition = 'bottom' | 'right' | 'floating';
71
+ interface NextTraceDevToolsProps {
72
+ store?: NextTraceStore;
73
+ defaultPosition?: DockPosition;
74
+ defaultTheme?: DevToolsTheme;
75
+ initialOpen?: boolean;
76
+ }
77
+ declare const NextTraceDevTools: React.FC<NextTraceDevToolsProps>;
78
+
79
+ interface TimelineListProps {
80
+ events: NextTraceEvent[];
81
+ selectedEventId: string | null;
82
+ onSelectEvent: (eventId: string) => void;
83
+ theme: DevToolsTheme;
84
+ }
85
+ declare const TimelineList: React.FC<TimelineListProps>;
86
+
87
+ interface InspectorPanelProps {
88
+ event: NextTraceEvent;
89
+ onClose: () => void;
90
+ theme: DevToolsTheme;
91
+ }
92
+ declare const InspectorPanel: React.FC<InspectorPanelProps>;
93
+
94
+ interface JsonViewerProps {
95
+ data: unknown;
96
+ theme: DevToolsTheme;
97
+ }
98
+ declare const JsonViewer: React.FC<JsonViewerProps>;
99
+
100
+ interface SettingsModalProps {
101
+ store: NextTraceStore;
102
+ isOpen: boolean;
103
+ onClose: () => void;
104
+ theme: DevToolsTheme;
105
+ }
106
+ declare const SettingsModal: React.FC<SettingsModalProps>;
107
+
108
+ export { type DevToolsTheme, type DockPosition, InspectorPanel, JsonViewer, NextTraceDevTools, type NextTraceDevToolsProps, SettingsModal, TimelineList, tokens, typography };
package/dist/index.d.ts ADDED
@@ -0,0 +1,108 @@
1
+ import React from 'react';
2
+ import { NextTraceStore, NextTraceEvent } from '@nexttrace/core';
3
+
4
+ /**
5
+ * Design tokens and styles for NextTrace DevTools
6
+ * Encapsulated CSS-in-JS style objects to ensure complete isolation from host app CSS.
7
+ */
8
+ type DevToolsTheme = 'dark' | 'light';
9
+ declare const tokens: {
10
+ dark: {
11
+ bg: string;
12
+ bgSurface: string;
13
+ bgElevated: string;
14
+ bgHover: string;
15
+ bgActive: string;
16
+ border: string;
17
+ borderMuted: string;
18
+ text: string;
19
+ textMuted: string;
20
+ textDim: string;
21
+ accent: string;
22
+ accentHover: string;
23
+ accentBg: string;
24
+ success: string;
25
+ successBg: string;
26
+ warning: string;
27
+ warningBg: string;
28
+ error: string;
29
+ errorBg: string;
30
+ purple: string;
31
+ purpleBg: string;
32
+ badgeBg: string;
33
+ shadow: string;
34
+ scrollbarThumb: string;
35
+ scrollbarThumbHover: string;
36
+ };
37
+ light: {
38
+ bg: string;
39
+ bgSurface: string;
40
+ bgElevated: string;
41
+ bgHover: string;
42
+ bgActive: string;
43
+ border: string;
44
+ borderMuted: string;
45
+ text: string;
46
+ textMuted: string;
47
+ textDim: string;
48
+ accent: string;
49
+ accentHover: string;
50
+ accentBg: string;
51
+ success: string;
52
+ successBg: string;
53
+ warning: string;
54
+ warningBg: string;
55
+ error: string;
56
+ errorBg: string;
57
+ purple: string;
58
+ purpleBg: string;
59
+ badgeBg: string;
60
+ shadow: string;
61
+ scrollbarThumb: string;
62
+ scrollbarThumbHover: string;
63
+ };
64
+ };
65
+ declare const typography: {
66
+ fontSans: string;
67
+ fontMono: string;
68
+ };
69
+
70
+ type DockPosition = 'bottom' | 'right' | 'floating';
71
+ interface NextTraceDevToolsProps {
72
+ store?: NextTraceStore;
73
+ defaultPosition?: DockPosition;
74
+ defaultTheme?: DevToolsTheme;
75
+ initialOpen?: boolean;
76
+ }
77
+ declare const NextTraceDevTools: React.FC<NextTraceDevToolsProps>;
78
+
79
+ interface TimelineListProps {
80
+ events: NextTraceEvent[];
81
+ selectedEventId: string | null;
82
+ onSelectEvent: (eventId: string) => void;
83
+ theme: DevToolsTheme;
84
+ }
85
+ declare const TimelineList: React.FC<TimelineListProps>;
86
+
87
+ interface InspectorPanelProps {
88
+ event: NextTraceEvent;
89
+ onClose: () => void;
90
+ theme: DevToolsTheme;
91
+ }
92
+ declare const InspectorPanel: React.FC<InspectorPanelProps>;
93
+
94
+ interface JsonViewerProps {
95
+ data: unknown;
96
+ theme: DevToolsTheme;
97
+ }
98
+ declare const JsonViewer: React.FC<JsonViewerProps>;
99
+
100
+ interface SettingsModalProps {
101
+ store: NextTraceStore;
102
+ isOpen: boolean;
103
+ onClose: () => void;
104
+ theme: DevToolsTheme;
105
+ }
106
+ declare const SettingsModal: React.FC<SettingsModalProps>;
107
+
108
+ export { type DevToolsTheme, type DockPosition, InspectorPanel, JsonViewer, NextTraceDevTools, type NextTraceDevToolsProps, SettingsModal, TimelineList, tokens, typography };