@promakeai/inspector 1.0.3 → 1.0.6

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 (5) hide show
  1. package/README.md +130 -111
  2. package/dist/inspector.js +3096 -2728
  3. package/package.json +2 -3
  4. package/dist/components/ui/tooltip.d.ts +0 -8
  5. package/dist/components/ui/tooltip.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,111 +1,130 @@
1
- # @promakeai/inspector
2
-
3
- Visual element inspector React component with AI prompt support.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @promakeai/inspector
9
- # or
10
- yarn add @promakeai/inspector
11
- # or
12
- bun add @promakeai/inspector
13
- ```
14
-
15
- ## Peer Dependencies
16
-
17
- Make sure you have these installed in your project:
18
-
19
- ```bash
20
- npm install react react-dom
21
- ```
22
-
23
- ## Usage
24
-
25
- ### 1. Add Vite Plugin (for component tracking)
26
-
27
- ```typescript
28
- // vite.config.ts
29
- import { defineConfig } from 'vite';
30
- import react from '@vitejs/plugin-react';
31
- import { componentDebuggerPlugin } from '@promakeai/inspector/plugin';
32
-
33
- export default defineConfig({
34
- plugins: [
35
- react(),
36
- componentDebuggerPlugin(),
37
- ],
38
- });
39
- ```
40
-
41
- ### 2. Use Inspector in Your App
42
-
43
- ```tsx
44
- import { Inspector } from '@promakeai/inspector';
45
- import '@promakeai/inspector/style.css';
46
-
47
- function App() {
48
- return (
49
- <div>
50
- <Inspector
51
- src="http://localhost:5173" // Your app URL
52
- labels={{
53
- editText: 'Edit Text',
54
- editImage: 'Edit Image',
55
- // ... other labels
56
- }}
57
- theme={{
58
- primaryColor: 'rgb(58, 18, 189)',
59
- // ... other theme options
60
- }}
61
- />
62
- </div>
63
- );
64
- }
65
- ```
66
-
67
- ### 3. Use Hook in Parent App
68
-
69
- ```tsx
70
- import { useInspector } from '@promakeai/inspector-hook';
71
-
72
- function ParentApp() {
73
- const {
74
- isReady,
75
- selectedElement,
76
- setInspectorEnabled,
77
- updateElementText,
78
- updateElementImage,
79
- updateElementStyles,
80
- } = useInspector('inspector-iframe-id');
81
-
82
- return (
83
- <div>
84
- <button onClick={() => setInspectorEnabled(true)}>
85
- Enable Inspector
86
- </button>
87
- <iframe
88
- id="inspector-iframe-id"
89
- src="http://localhost:5173"
90
- style={{ width: '100%', height: '100vh' }}
91
- />
92
- </div>
93
- );
94
- }
95
- ```
96
-
97
- ## Features
98
-
99
- - 🎯 Visual element selection
100
- - ✏️ Text editing
101
- - 🖼️ Image URL editing
102
- - 🎨 Style editing (colors, spacing, typography)
103
- - 🔍 Element stack navigation (select overlapping elements)
104
- - 🌐 i18n support via labels
105
- - 🎨 Customizable theme
106
- - 📱 Responsive design
107
-
108
- ## License
109
-
110
- MIT
111
-
1
+ # @promakeai/inspector
2
+
3
+ Visual element inspector React component with AI prompt support.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @promakeai/inspector
9
+ # or
10
+ yarn add @promakeai/inspector
11
+ # or
12
+ bun add @promakeai/inspector
13
+ ```
14
+
15
+ ## Peer Dependencies
16
+
17
+ Make sure you have these installed in your project:
18
+
19
+ ```bash
20
+ npm install react react-dom
21
+ ```
22
+
23
+ ## Usage
24
+
25
+ ### 1. Add Vite Plugin (for component tracking)
26
+
27
+ ```typescript
28
+ // vite.config.ts
29
+ import { defineConfig } from "vite";
30
+ import react from "@vitejs/plugin-react";
31
+ import { inspectorDebugger } from "@promakeai/inspector/plugin";
32
+
33
+ export default defineConfig({
34
+ plugins: [inspectorDebugger({ enabled: true }), react()],
35
+ // IMPORTANT: Prevent Vite from bundling React inside inspector
36
+ optimizeDeps: {
37
+ exclude: ["@promakeai/inspector"],
38
+ },
39
+ resolve: {
40
+ dedupe: ["react", "react-dom"],
41
+ },
42
+ });
43
+ ```
44
+
45
+ ### 2. Use Inspector Component
46
+
47
+ **Option A: Standalone Mode (inspects itself)**
48
+
49
+ ```tsx
50
+ import { Inspector } from "@promakeai/inspector";
51
+ import "@promakeai/inspector/style.css";
52
+
53
+ function App() {
54
+ return (
55
+ <>
56
+ <YourApp />
57
+ <Inspector /> {/* No src prop - inspects current page */}
58
+ </>
59
+ );
60
+ }
61
+ ```
62
+
63
+ **Option B: Parent-Child Mode (parent inspects child iframe)**
64
+
65
+ ```tsx
66
+ import { Inspector } from "@promakeai/inspector";
67
+ import "@promakeai/inspector/style.css";
68
+
69
+ function ParentApp() {
70
+ return (
71
+ <Inspector
72
+ src="http://localhost:5173" // Child app URL
73
+ labels={{
74
+ editText: "Edit Text",
75
+ editImage: "Edit Image",
76
+ // ... other labels
77
+ }}
78
+ theme={{
79
+ primaryColor: "rgb(58, 18, 189)",
80
+ // ... other theme options
81
+ }}
82
+ />
83
+ );
84
+ }
85
+ ```
86
+
87
+ ### 3. Use Hook in Parent App
88
+
89
+ ```tsx
90
+ import { useInspector } from "@promakeai/inspector-hook";
91
+
92
+ function ParentApp() {
93
+ const {
94
+ isReady,
95
+ selectedElement,
96
+ setInspectorEnabled,
97
+ updateElementText,
98
+ updateElementImage,
99
+ updateElementStyles,
100
+ } = useInspector("inspector-iframe-id");
101
+
102
+ return (
103
+ <div>
104
+ <button onClick={() => setInspectorEnabled(true)}>
105
+ Enable Inspector
106
+ </button>
107
+ <iframe
108
+ id="inspector-iframe-id"
109
+ src="http://localhost:5173"
110
+ style={{ width: "100%", height: "100vh" }}
111
+ />
112
+ </div>
113
+ );
114
+ }
115
+ ```
116
+
117
+ ## Features
118
+
119
+ - 🎯 Visual element selection
120
+ - ✏️ Text editing
121
+ - 🖼️ Image URL editing
122
+ - 🎨 Style editing (colors, spacing, typography)
123
+ - 🔍 Element stack navigation (select overlapping elements)
124
+ - 🌐 i18n support via labels
125
+ - 🎨 Customizable theme
126
+ - 📱 Responsive design
127
+
128
+ ## License
129
+
130
+ MIT