@promakeai/inspector 0.0.3 → 0.1.0

package/dist/hook.js

@@ -12,16 +12,22 @@
  * function App() {
  *   const iframeRef = useRef<HTMLIFrameElement>(null);
  *
- *   const { isInspecting, toggleInspector, showContentInput } = useInspector(
+ *   const { isInspecting, toggleInspector, showContentInput, showImageInput } = useInspector(
  *     iframeRef,
  *     {
  *       onElementSelected: (data) => {
  *         console.log('Element selected:', data);
  *         console.log('Is text node:', data.isTextNode);
+ *         console.log('Is image node:', data.isImageNode);
  *
  *         // Dynamically show content input for text nodes
  *         if (data.isTextNode) {
- *           showContentInput(true);
+ *           showContentInput(true, true); // updateImmediately: true for instant feedback
+ *         }
+ *
+ *         // Dynamically show image input for image nodes
+ *         if (data.isImageNode) {
+ *           showImageInput(true, true); // updateImmediately: true for instant feedback
  *         }
  *       },
  *       onPromptSubmitted: (data) => {
@@ -35,6 +41,19 @@
  *       onTextUpdated: (data) => {
  *         console.log('Text updated:', data.text);
  *       },
+ *       onImageUpdated: (data) => {
+ *         console.log('Image updated:', data.imageFile.name);
+ *         console.log('Image data (base64):', data.imageData);
+ *         // Upload to server
+ *         fetch('/api/upload-image', {
+ *           method: 'POST',
+ *           body: JSON.stringify(data)
+ *         });
+ *       },
+ *       onInspectorClosed: () => {
+ *         console.log('Inspector closed');
+ *         // Update UI state, re-enable elements, etc.
+ *       },
  *       onError: (data) => {
  *         console.error('Error:', data);
  *         // Send to error tracking service
@@ -45,7 +64,12 @@
  *       editText: 'Edit Text',
  *       textPlaceholder: 'Enter text...',
  *       updateText: 'Update',
- *       promptPlaceholder: 'Ask AI for changes...'
+ *       promptPlaceholder: 'Ask AI for changes...',
+ *       editImage: 'Change Image',
+ *       imageUploadTitle: 'Select Image',
+ *       imageUploadHint: 'Click or drag',
+ *       updateImage: 'Update Image',
+ *       badgeText: 'Built with Promake'
  *     },
  *     {
  *       // Optional: Custom theme colors (all optional)
@@ -55,7 +79,10 @@
  *       buttonTextColor: '#ffffff',
  *       inputBackgroundColor: '#f9fafb',
  *       inputTextColor: '#111827',
- *       inputBorderColor: '#d1d5db'
+ *       inputBorderColor: '#d1d5db',
+ *       badgeGradientStart: '#411E93',
+ *       badgeGradientEnd: '#E87C85',
+ *       badgeTextColor: '#ffffff'
  *     }
  *   );
  *
@@ -66,7 +93,13 @@
  *           Toggle Inspector
  *         </button>
  *         <button onClick={() => showContentInput(true)}>
- *           Show Content Input
+ *           Show Text Input
+ *         </button>
+ *         <button onClick={() => showImageInput(true)}>
+ *           Show Image Input
+ *         </button>
+ *         <button onClick={() => setBadgeVisible(true)}>
+ *           Show Promake Badge
  *         </button>
  *       </div>
  *       <iframe ref={iframeRef} src="http://localhost:5173" />
@@ -122,37 +155,77 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
     /**
      * Show or hide content input
      */
-    const showContentInput = useCallback((show) => {
+    const showContentInput = useCallback((show, updateImmediately) => {
         sendMessage({
             type: "SHOW_CONTENT_INPUT",
             show: show,
+            updateImmediately: updateImmediately,
         });
     }, [sendMessage]);
+    /**
+     * Show or hide image input
+     */
+    const showImageInput = useCallback((show, updateImmediately) => {
+        sendMessage({
+            type: "SHOW_IMAGE_INPUT",
+            show: show,
+            updateImmediately: updateImmediately,
+        });
+    }, [sendMessage]);
+    /**
+     * Show or hide "Built with Promake" badge
+     */
+    const setBadgeVisible = useCallback((visible) => {
+        sendMessage({
+            type: "SET_BADGE_VISIBLE",
+            visible: visible,
+            badgeText: labels?.badgeText,
+        });
+    }, [sendMessage, labels]);
     /**
      * Listen for messages from iframe
      */
     useEffect(() => {
         const handleMessage = (event) => {
+            // Parse message if it's a string (JSON stringified)
+            let messageData;
+            if (typeof event.data === "string") {
+                try {
+                    messageData = JSON.parse(event.data);
+                }
+                catch {
+                    return; // Invalid JSON, ignore
+                }
+            }
+            else {
+                messageData = event.data;
+            }
             // Security: Only handle expected message types
-            if (!event.data || typeof event.data.type !== "string") {
+            if (!messageData || typeof messageData.type !== "string") {
                 return;
             }
-            const { type, data } = event.data;
-            switch (type) {
+            switch (messageData.type) {
                 case "INSPECTOR_ELEMENT_SELECTED":
-                    callbacks?.onElementSelected?.(data);
+                    callbacks?.onElementSelected?.(messageData.data);
                     break;
                 case "URL_CHANGED":
-                    callbacks?.onUrlChange?.(data);
+                    callbacks?.onUrlChange?.(messageData.data);
                     break;
                 case "INSPECTOR_PROMPT_SUBMITTED":
-                    callbacks?.onPromptSubmitted?.(data);
+                    callbacks?.onPromptSubmitted?.(messageData.data);
                     break;
                 case "INSPECTOR_TEXT_UPDATED":
-                    callbacks?.onTextUpdated?.(data);
+                    callbacks?.onTextUpdated?.(messageData.data);
+                    break;
+                case "INSPECTOR_IMAGE_UPDATED":
+                    callbacks?.onImageUpdated?.(messageData.data);
+                    break;
+                case "INSPECTOR_CLOSED":
+                    setIsInspecting(false);
+                    callbacks?.onInspectorClosed?.();
                     break;
                 case "INSPECTOR_ERROR":
-                    callbacks?.onError?.(data);
+                    callbacks?.onError?.(messageData.data);
                     break;
                 default:
                     // Unknown message type - ignore
@@ -185,5 +258,7 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
         startInspecting,
         stopInspecting,
         showContentInput,
+        showImageInput,
+        setBadgeVisible,
     };
 }

package/dist/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,wBAAgB,eAAe,IAAI,MAAM,CA6pBxC"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,wBAAgB,eAAe,IAAI,MAAM,CA+rCxC"}