@promakeai/inspector 1.0.3 → 1.0.5

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 (4) hide show
  1. package/README.md +134 -111
  2. package/package.json +1 -2
  3. package/dist/components/ui/tooltip.d.ts +0 -8
  4. package/dist/components/ui/tooltip.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,111 +1,134 @@
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: These settings prevent React duplication and ESM issues
36
+ optimizeDeps: {
37
+ exclude: ["@promakeai/inspector"],
38
+ },
39
+ resolve: {
40
+ dedupe: ["react", "react-dom"],
41
+ alias: {
42
+ // Fix for react-dom ESM default export issue
43
+ "react-dom": "react-dom/index.js",
44
+ },
45
+ },
46
+ });
47
+ ```
48
+
49
+ ### 2. Use Inspector Component
50
+
51
+ **Option A: Standalone Mode (inspects itself)**
52
+
53
+ ```tsx
54
+ import { Inspector } from "@promakeai/inspector";
55
+ import "@promakeai/inspector/style.css";
56
+
57
+ function App() {
58
+ return (
59
+ <>
60
+ <YourApp />
61
+ <Inspector /> {/* No src prop - inspects current page */}
62
+ </>
63
+ );
64
+ }
65
+ ```
66
+
67
+ **Option B: Parent-Child Mode (parent inspects child iframe)**
68
+
69
+ ```tsx
70
+ import { Inspector } from "@promakeai/inspector";
71
+ import "@promakeai/inspector/style.css";
72
+
73
+ function ParentApp() {
74
+ return (
75
+ <Inspector
76
+ src="http://localhost:5173" // Child app URL
77
+ labels={{
78
+ editText: "Edit Text",
79
+ editImage: "Edit Image",
80
+ // ... other labels
81
+ }}
82
+ theme={{
83
+ primaryColor: "rgb(58, 18, 189)",
84
+ // ... other theme options
85
+ }}
86
+ />
87
+ );
88
+ }
89
+ ```
90
+
91
+ ### 3. Use Hook in Parent App
92
+
93
+ ```tsx
94
+ import { useInspector } from "@promakeai/inspector-hook";
95
+
96
+ function ParentApp() {
97
+ const {
98
+ isReady,
99
+ selectedElement,
100
+ setInspectorEnabled,
101
+ updateElementText,
102
+ updateElementImage,
103
+ updateElementStyles,
104
+ } = useInspector("inspector-iframe-id");
105
+
106
+ return (
107
+ <div>
108
+ <button onClick={() => setInspectorEnabled(true)}>
109
+ Enable Inspector
110
+ </button>
111
+ <iframe
112
+ id="inspector-iframe-id"
113
+ src="http://localhost:5173"
114
+ style={{ width: "100%", height: "100vh" }}
115
+ />
116
+ </div>
117
+ );
118
+ }
119
+ ```
120
+
121
+ ## Features
122
+
123
+ - 🎯 Visual element selection
124
+ - ✏️ Text editing
125
+ - 🖼️ Image URL editing
126
+ - 🎨 Style editing (colors, spacing, typography)
127
+ - 🔍 Element stack navigation (select overlapping elements)
128
+ - 🌐 i18n support via labels
129
+ - 🎨 Customizable theme
130
+ - 📱 Responsive design
131
+
132
+ ## License
133
+
134
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@promakeai/inspector",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Visual element inspector React component with AI prompt support",
5
5
  "author": "Promake",
6
6
  "type": "module",
@@ -62,7 +62,6 @@
62
62
  "@radix-ui/react-select": "^2.2.6",
63
63
  "@radix-ui/react-slider": "^1.3.6",
64
64
  "@radix-ui/react-slot": "^1.2.4",
65
- "@radix-ui/react-tooltip": "^1.1.7",
66
65
  "clsx": "^2.1.1",
67
66
  "lodash": "^4.17.21",
68
67
  "lucide-react": "^0.554.0",
package/dist/components/ui/tooltip.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import * as React from "react";
2
- import * as TooltipPrimitive from "@radix-ui/react-tooltip";
3
- declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
4
- declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
5
- declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
6
- declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
- export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
8
- //# sourceMappingURL=tooltip.d.ts.map
package/dist/components/ui/tooltip.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAK5D,QAAA,MAAM,eAAe,iDAA4B,CAAC;AAElD,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAEhD,QAAA,MAAM,cAAc,gKAoBlB,CAAC;AAIH,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}