@promakeai/inspector 0.0.1

package/README.md

@@ -0,0 +1,316 @@
+# @promakeai/inspector
+
+Visual element inspector for React apps in iframe with AI prompt support. Perfect for visual editors, page builders, and low-code platforms.
+
+## Features
+
+- 🎯 **Element Selection** - Click to select any element on the page
+- 🔍 **React Component Detection** - Automatically detects React components via Fiber
+- 📝 **Text Editing** - Edit text content directly
+- 🤖 **AI Prompt Support** - Send prompts to AI for element modifications
+- 🎨 **Visual Feedback** - Highlight selected elements with overlay
+- 🔒 **Pause Mode** - Lock selection and disable scroll while editing
+- 🌐 **URL Tracking** - Monitor navigation changes in iframe
+- 🐛 **Error Tracking** - Capture JavaScript errors, promise rejections, and console errors
+- 🎨 **Customizable Labels** - Multi-language support
+- 📦 **TypeScript** - Full type safety
+
+## Installation
+
+```bash
+npm install @promakeai/inspector
+```
+
+## Usage
+
+### Template Side (iframe/vite app)
+
+Add the plugin to your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { inspectorPlugin } from "@promakeai/inspector/plugin";
+
+export default defineConfig({
+  plugins: [react(), inspectorPlugin()],
+});
+```
+
+### Parent App Side
+
+Use the hook in your React app:
+
+```typescript
+import { useRef } from "react";
+import { useInspector } from "@promakeai/inspector/hook";
+
+function App() {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const { isInspecting, toggleInspector } = useInspector(
+    iframeRef,
+    {
+      onElementSelected: (data) => {
+        console.log("Element selected:", data);
+        // Access component info
+        console.log(data.component?.fileName);
+        console.log(data.component?.lineNumber);
+      },
+      onPromptSubmitted: (data) => {
+        console.log("AI Prompt:", data.prompt);
+        // Send to your AI service
+        fetch("/api/ai-edit", {
+          method: "POST",
+          body: JSON.stringify({
+            prompt: data.prompt,
+            element: data.element,
+          }),
+        });
+      },
+      onTextUpdated: (data) => {
+        console.log("Text updated:", data.text);
+        // Save to backend
+      },
+      onUrlChange: (data) => {
+        console.log("URL changed:", data.pathname);
+      },
+      onError: (data) => {
+        console.error("Error in template:", data);
+        // Send to error tracking service (Sentry, etc.)
+        // Sentry.captureException(new Error(data.message));
+      },
+    },
+    {
+      // Optional: Custom labels
+      editText: "Edit Text",
+      textPlaceholder: "Enter text...",
+      updateText: "Update",
+      promptPlaceholder: "Ask AI for changes...",
+    }
+  );
+
+  return (
+    <div>
+      <button onClick={() => toggleInspector()}>
+        {isInspecting ? "Stop Inspector" : "Start Inspector"}
+      </button>
+
+      <iframe ref={iframeRef} src="http://localhost:5173" />
+    </div>
+  );
+}
+```
+
+## API
+
+### `useInspector(iframeRef, callbacks?, labels?)`
+
+#### Parameters
+
+- **iframeRef**: `RefObject<HTMLIFrameElement>` - Reference to the iframe element
+- **callbacks**: `InspectorCallbacks` (optional)
+  - `onElementSelected`: Called when an element is selected
+  - `onPromptSubmitted`: Called when AI prompt is submitted
+  - `onTextUpdated`: Called when text content is updated
+  - `onUrlChange`: Called when URL changes in iframe
+  - `onError`: Called when an error occurs in iframe
+- **labels**: `InspectorLabels` (optional)
+  - `editText`: Label for text edit section
+  - `textPlaceholder`: Placeholder for text input
+  - `updateText`: Label for update button
+  - `promptPlaceholder`: Placeholder for prompt input
+
+#### Returns
+
+- **isInspecting**: `boolean` - Current inspection state
+- **toggleInspector**: `(active?: boolean) => void` - Toggle inspection mode
+- **startInspecting**: `() => void` - Start inspecting
+- **stopInspecting**: `() => void` - Stop inspecting
+
+## Types
+
+### `SelectedElementData`
+
+```typescript
+interface SelectedElementData {
+  tagName: string;
+  className: string;
+  id: string;
+  component: ComponentInfo | null;
+  position: ElementPosition;
+}
+```
+
+### `ComponentInfo`
+
+```typescript
+interface ComponentInfo {
+  componentName: string;
+  fileName: string;
+  lineNumber: number;
+  columnNumber: number;
+}
+```
+
+### `PromptSubmittedData`
+
+```typescript
+interface PromptSubmittedData {
+  prompt: string;
+  element: SelectedElementData;
+}
+```
+
+### `TextUpdatedData`
+
+```typescript
+interface TextUpdatedData {
+  text: string;
+  originalText: string;
+  element: SelectedElementData;
+}
+```
+
+### `ErrorData`
+
+```typescript
+interface ErrorData {
+  type: "javascript" | "promise" | "console";
+  message: string;
+  stack?: string;
+  fileName?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+  timestamp: number;
+}
+```
+
+## Features in Detail
+
+### Element Selection
+
+Click any element to select it. The inspector will:
+
+- Show a blue highlight overlay
+- Display a control box below/above the element
+- Pause scrolling
+- Extract React component information
+
+### Text Editing
+
+For text-only elements:
+
+- Textarea appears with current text
+- Edit and click "Update"
+- Event is sent to parent app
+
+### AI Prompts
+
+For any element:
+
+- Enter a prompt describing desired changes
+- Click the send button (↑)
+- Prompt + element data sent to parent app
+
+### Component Detection
+
+Automatically extracts:
+
+- Component name
+- Source file path
+- Line number
+- Column number
+
+**Note**: Works only in development mode with React DevTools enabled.
+
+### Error Tracking
+
+Automatically captures and reports:
+
+- **JavaScript Errors**: Runtime errors with stack traces
+- **Promise Rejections**: Unhandled promise rejections
+- **Console Errors**: All `console.error()` calls
+
+All errors are sent to the parent app with detailed information including:
+
+- Error type and message
+- Stack trace
+- File name and line number
+- Timestamp
+
+Perfect for integrating with error tracking services like Sentry, LogRocket, or custom logging solutions.
+
+## Examples
+
+### Multi-language Support
+
+```typescript
+const { toggleInspector } = useInspector(iframeRef, callbacks, {
+  editText: "Metni Düzenle",
+  textPlaceholder: "Metin girin...",
+  updateText: "Güncelle",
+  promptPlaceholder: "AI için komut girin...",
+});
+```
+
+### Open File in Editor
+
+```typescript
+onElementSelected: async (data) => {
+  if (data.component) {
+    await fetch("/api/open-in-editor", {
+      method: "POST",
+      body: JSON.stringify({
+        fileName: data.component.fileName,
+        lineNumber: data.component.lineNumber,
+      }),
+    });
+  }
+};
+```
+
+### Error Tracking with Sentry
+
+```typescript
+import * as Sentry from "@sentry/react";
+
+const { toggleInspector } = useInspector(iframeRef, {
+  onError: (data) => {
+    // Send to Sentry
+    Sentry.captureException(new Error(data.message), {
+      extra: {
+        type: data.type,
+        stack: data.stack,
+        fileName: data.fileName,
+        lineNumber: data.lineNumber,
+        timestamp: data.timestamp,
+      },
+    });
+  },
+});
+```
+
+## Browser Support
+
+- Chrome/Edge: ✅
+- Firefox: ✅
+- Safari: ✅
+
+## Requirements
+
+- Vite 5.0+
+- React 18.0+
+- TypeScript (recommended)
+
+## License
+
+MIT
+
+## Contributing
+
+Issues and pull requests are welcome!
+
+## Author
+
+Promake

package/dist/hook.d.ts

@@ -0,0 +1,61 @@
+/**
+ * useInspector Hook
+ *
+ * Ana app'ten template iframe'ine inspector komutları göndermek ve
+ * gelen olayları dinlemek için kullanılır.
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { useInspector } from '@promakeai/inspector/hook';
+ *
+ * function App() {
+ *   const iframeRef = useRef<HTMLIFrameElement>(null);
+ *
+ *   const { isInspecting, toggleInspector } = useInspector(
+ *     iframeRef,
+ *     {
+ *       onElementSelected: (data) => {
+ *         console.log('Element selected:', data);
+ *       },
+ *       onPromptSubmitted: (data) => {
+ *         console.log('AI Prompt:', data.prompt);
+ *         // Send to AI
+ *         fetch('/api/ai-edit', {
+ *           method: 'POST',
+ *           body: JSON.stringify(data)
+ *         });
+ *       },
+ *       onTextUpdated: (data) => {
+ *         console.log('Text updated:', data.text);
+ *       },
+ *       onError: (data) => {
+ *         console.error('Error:', data);
+ *         // Send to error tracking service
+ *       }
+ *     },
+ *     {
+ *       // Optional: Custom labels (defaults to English)
+ *       editText: 'Edit Text',
+ *       textPlaceholder: 'Enter text...',
+ *       updateText: 'Update',
+ *       promptPlaceholder: 'Ask AI for changes...'
+ *     }
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggleInspector()}>
+ *         {isInspecting ? 'Stop' : 'Start'} Inspector
+ *       </button>
+ *       <iframe ref={iframeRef} src="http://localhost:5173" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+import { RefObject } from "react";
+import type { InspectorCallbacks, InspectorLabels, UseInspectorReturn } from "./types";
+export declare function useInspector(iframeRef: RefObject<HTMLIFrameElement>, callbacks?: InspectorCallbacks, labels?: InspectorLabels): UseInspectorReturn;
+export type * from "./types";
+//# sourceMappingURL=hook.d.ts.map

package/dist/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAMnB,MAAM,SAAS,CAAC;AA8BjB,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,GACvB,kBAAkB,CAwHpB;AAGD,mBAAmB,SAAS,CAAC"}

package/dist/hook.js

@@ -0,0 +1,155 @@
+/**
+ * useInspector Hook
+ *
+ * Ana app'ten template iframe'ine inspector komutları göndermek ve
+ * gelen olayları dinlemek için kullanılır.
+ *
+ * @example
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { useInspector } from '@promakeai/inspector/hook';
+ *
+ * function App() {
+ *   const iframeRef = useRef<HTMLIFrameElement>(null);
+ *
+ *   const { isInspecting, toggleInspector } = useInspector(
+ *     iframeRef,
+ *     {
+ *       onElementSelected: (data) => {
+ *         console.log('Element selected:', data);
+ *       },
+ *       onPromptSubmitted: (data) => {
+ *         console.log('AI Prompt:', data.prompt);
+ *         // Send to AI
+ *         fetch('/api/ai-edit', {
+ *           method: 'POST',
+ *           body: JSON.stringify(data)
+ *         });
+ *       },
+ *       onTextUpdated: (data) => {
+ *         console.log('Text updated:', data.text);
+ *       },
+ *       onError: (data) => {
+ *         console.error('Error:', data);
+ *         // Send to error tracking service
+ *       }
+ *     },
+ *     {
+ *       // Optional: Custom labels (defaults to English)
+ *       editText: 'Edit Text',
+ *       textPlaceholder: 'Enter text...',
+ *       updateText: 'Update',
+ *       promptPlaceholder: 'Ask AI for changes...'
+ *     }
+ *   );
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => toggleInspector()}>
+ *         {isInspecting ? 'Stop' : 'Start'} Inspector
+ *       </button>
+ *       <iframe ref={iframeRef} src="http://localhost:5173" />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+import { useEffect, useState, useCallback } from "react";
+export function useInspector(iframeRef, callbacks, labels) {
+    const [isInspecting, setIsInspecting] = useState(false);
+    /**
+     * Send message to iframe
+     */
+    const sendMessage = useCallback((message) => {
+        const iframe = iframeRef.current;
+        if (!iframe || !iframe.contentWindow) {
+            console.warn("Inspector: iframe not found or not loaded");
+            return;
+        }
+        try {
+            iframe.contentWindow.postMessage(message, "*");
+        }
+        catch (error) {
+            console.error("Inspector: Failed to send message:", error);
+        }
+    }, [iframeRef]);
+    /**
+     * Toggle inspector mode
+     */
+    const toggleInspector = useCallback((active) => {
+        const newState = active !== undefined ? active : !isInspecting;
+        setIsInspecting(newState);
+        sendMessage({
+            type: "TOGGLE_INSPECTOR",
+            active: newState,
+            labels: labels,
+        });
+    }, [isInspecting, sendMessage, labels]);
+    /**
+     * Start inspecting
+     */
+    const startInspecting = useCallback(() => {
+        toggleInspector(true);
+    }, [toggleInspector]);
+    /**
+     * Stop inspecting
+     */
+    const stopInspecting = useCallback(() => {
+        toggleInspector(false);
+    }, [toggleInspector]);
+    /**
+     * Listen for messages from iframe
+     */
+    useEffect(() => {
+        const handleMessage = (event) => {
+            // Security: Only handle expected message types
+            if (!event.data || typeof event.data.type !== "string") {
+                return;
+            }
+            const { type, data } = event.data;
+            switch (type) {
+                case "INSPECTOR_ELEMENT_SELECTED":
+                    callbacks?.onElementSelected?.(data);
+                    break;
+                case "URL_CHANGED":
+                    callbacks?.onUrlChange?.(data);
+                    break;
+                case "INSPECTOR_PROMPT_SUBMITTED":
+                    callbacks?.onPromptSubmitted?.(data);
+                    break;
+                case "INSPECTOR_TEXT_UPDATED":
+                    callbacks?.onTextUpdated?.(data);
+                    break;
+                case "INSPECTOR_ERROR":
+                    callbacks?.onError?.(data);
+                    break;
+                default:
+                    // Unknown message type - ignore
+                    break;
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [callbacks]);
+    /**
+     * Cleanup: Turn off inspector on unmount
+     */
+    useEffect(() => {
+        return () => {
+            if (isInspecting) {
+                sendMessage({
+                    type: "TOGGLE_INSPECTOR",
+                    active: false,
+                });
+            }
+        };
+    }, [isInspecting, sendMessage]);
+    return {
+        isInspecting,
+        toggleInspector,
+        startInspecting,
+        stopInspecting,
+    };
+}

package/dist/plugin.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Vite Inspector Plugin
+ *
+ * Template/iframe tarafında çalışır. Sayfaya element seçme, React component
+ * bilgisi çıkarma, hata yakalama ve AI prompt gönderme özellikleri ekler.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { inspectorPlugin } from '@promakeai/inspector/plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     react(),
+ *     inspectorPlugin()
+ *   ]
+ * });
+ * ```
+ *
+ * Plugin özellikler:
+ * - Element seçimi (click-to-select)
+ * - React Fiber üzerinden component bilgisi çıkarma
+ * - Text editing desteği
+ * - AI prompt gönderme
+ * - URL değişikliği takibi
+ * - JavaScript hata yakalama (error, promise rejection, console.error)
+ * - Özelleştirilebilir dil desteği
+ *
+ * Not: Bu plugin otomatik olarak template/iframe'e enjekte edilir.
+ * Ana app'te useInspector hook'u ile kontrol edilir.
+ */
+import { Plugin } from "vite";
+export declare function inspectorPlugin(): Plugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

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

package/dist/plugin.js

@@ -0,0 +1,625 @@
+/**
+ * Vite Inspector Plugin
+ *
+ * Template/iframe tarafında çalışır. Sayfaya element seçme, React component
+ * bilgisi çıkarma, hata yakalama ve AI prompt gönderme özellikleri ekler.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { inspectorPlugin } from '@promakeai/inspector/plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     react(),
+ *     inspectorPlugin()
+ *   ]
+ * });
+ * ```
+ *
+ * Plugin özellikler:
+ * - Element seçimi (click-to-select)
+ * - React Fiber üzerinden component bilgisi çıkarma
+ * - Text editing desteği
+ * - AI prompt gönderme
+ * - URL değişikliği takibi
+ * - JavaScript hata yakalama (error, promise rejection, console.error)
+ * - Özelleştirilebilir dil desteği
+ *
+ * Not: Bu plugin otomatik olarak template/iframe'e enjekte edilir.
+ * Ana app'te useInspector hook'u ile kontrol edilir.
+ */
+export function inspectorPlugin() {
+    return {
+        name: "vite-plugin-inspector",
+        transformIndexHtml(html) {
+            // Inject inspector client script into HTML
+            return {
+                html,
+                tags: [
+                    {
+                        tag: "script",
+                        attrs: {
+                            type: "module",
+                        },
+                        children: `
+(function() {
+  let inspectMode = false;
+  let isPaused = false;
+  let hoveredElement = null;
+  let selectedElement = null;
+  let selectedElementData = null;
+  let overlay = null;
+  let controlBox = null;
+  
+  // Customizable labels
+  let labels = {
+    editText: 'Edit Text',
+    textPlaceholder: 'Enter text...',
+    updateText: 'Update',
+    promptPlaceholder: 'Ask Promake for changes...'
+  };
+  
+  // Create overlay for highlighting
+  function createOverlay() {
+    if (overlay) return overlay;
+    
+    overlay = document.createElement('div');
+    overlay.id = 'inspector-overlay';
+    overlay.style.cssText = \`
+      position: fixed;
+      pointer-events: none;
+      border: 2px solid #3b82f6;
+      background: rgba(59, 130, 246, 0.1);
+      z-index: 999999;
+      transition: all 0.1s ease;
+      display: none;
+    \`;
+    document.body.appendChild(overlay);
+    return overlay;
+  }
+  
+  // Create control box for editing
+  function createControlBox(element, elementData) {
+    // Remove existing control box
+    if (controlBox) {
+      controlBox.remove();
+    }
+    
+    controlBox = document.createElement('div');
+    controlBox.id = 'inspector-control-box';
+    
+    const rect = element.getBoundingClientRect();
+    const isTextElement = element.textContent && element.children.length === 0;
+    const currentText = isTextElement ? element.textContent.trim() : '';
+    
+    // Calculate position
+    const boxWidth = Math.max(320, Math.min(rect.width, 500));
+    const centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    
+    // Estimate box height
+    const estimatedBoxHeight = isTextElement ? 280 : 180;
+    
+    // Show above if not enough space below
+    let topPosition;
+    if (spaceBelow < estimatedBoxHeight && spaceAbove > spaceBelow) {
+      // Show above element (positioned from top, showing above element)
+      topPosition = rect.top - estimatedBoxHeight - 10;
+      controlBox.setAttribute('data-position', 'above');
+    } else {
+      // Show below element
+      topPosition = rect.bottom + 10;
+      controlBox.setAttribute('data-position', 'below');
+    }
+    
+    controlBox.style.cssText = \`
+      position: fixed;
+      top: \${topPosition}px;
+      left: \${Math.max(10, centerLeft)}px;
+      width: \${boxWidth}px;
+      background: #ffffff;
+      border: 1px solid #e5e7eb;
+      border-radius: 14px;
+      padding: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+      z-index: 1000000;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: 14px;
+    \`;
+    
+    let html = '';
+    
+    // Text input (if text element)
+    if (isTextElement) {
+      html += \`
+        <div style="margin-bottom: 12px;">
+          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;">
+            <label style="font-weight: 500; color: #111827; font-size: 13px;">
+              \${labels.editText}
+            </label>
+            <button 
+              id="inspector-close"
+              style="width: 32px; height: 32px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 14px; transition: all 0.2s; padding: 0; flex-shrink: 0;"
+              onmouseover="this.style.background='#f3f4f6';"
+              onmouseout="this.style.background='transparent';"
+              title="Close"
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 4L4 12M4 4L12 12" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </button>
+          </div>
+          <textarea 
+            id="inspector-text-input"
+            style="width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 14px; font-size: 14px; color: #111827; background: #f9fafb; transition: all 0.2s; resize: vertical; min-height: 60px; max-height: 200px; font-family: inherit; line-height: 1.5;"
+            placeholder="\${labels.textPlaceholder}"
+            onfocus="this.style.background='#ffffff'; this.style.borderColor='#9ca3af';"
+            onblur="this.style.background='#f9fafb'; this.style.borderColor='#d1d5db';"
+          >\${currentText}</textarea>
+        </div>
+        <div style="margin-bottom: 10px;">
+          <button 
+            id="inspector-text-submit"
+            style="width: 100%; padding: 10px 16px; background: #4417db; color: white; border: none; border-radius: 14px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all 0.2s;"
+            onmouseover="this.style.background='#3712af';"
+            onmouseout="this.style.background='#4417db';"
+            title="\${labels.updateText}"
+          >
+            \${labels.updateText}
+          </button>
+        </div>
+        <div style="border-top: 1px solid #e5e7eb; margin: 12px 0;"></div>
+      \`;
+    }
+    
+    // Prompt input and buttons (side by side)
+    html += \`
+      <div style="display: flex; gap: 8px; align-items: stretch;">
+        <input 
+          type="text" 
+          id="inspector-prompt-input"
+          style="flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 14px; font-size: 14px; color: #111827; background: #f9fafb; transition: all 0.2s;"
+          placeholder="\${labels.promptPlaceholder}"
+          onfocus="this.style.background='#ffffff'; this.style.borderColor='#9ca3af';"
+          onblur="this.style.background='#f9fafb'; this.style.borderColor='#d1d5db';"
+        />
+        <button 
+          id="inspector-prompt-submit"
+          style="width: 44px; height: 44px; padding: 0; background: #4417db; color: white; border: none; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0;"
+          onmouseover="this.style.background='#3712af';"
+          onmouseout="this.style.background='#4417db';"
+          title="Send"
+        >
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 15V5M10 5L5 10M10 5L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+    \`;
+    
+    // Close button next to send button (only for non-text elements)
+    if (!isTextElement) {
+      html += \`
+        <button 
+          id="inspector-close"
+          style="padding: 10px; background: #f3f4f6; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 14px; transition: all 0.2s;"
+          onmouseover="this.style.background='#e5e7eb';"
+          onmouseout="this.style.background='#f3f4f6';"
+          title="Close"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 4L4 12M4 4L12 12" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      \`;
+    }
+    
+    html += \`</div>\`;
+    
+    controlBox.innerHTML = html;
+    document.body.appendChild(controlBox);
+    
+    // Event listeners
+    const promptInput = controlBox.querySelector('#inspector-prompt-input');
+    const promptSubmit = controlBox.querySelector('#inspector-prompt-submit');
+    const closeBtn = controlBox.querySelector('#inspector-close');
+    
+    // Prompt submit
+    promptSubmit.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const prompt = promptInput.value.trim();
+      if (prompt) {
+        if (window.parent !== window) {
+          window.parent.postMessage({
+            type: 'INSPECTOR_PROMPT_SUBMITTED',
+            data: {
+              prompt: prompt,
+              element: elementData
+            }
+          }, '*');
+        }
+        console.log('Prompt submitted:', elementData);
+        
+        // Turn off inspect mode after sending
+        toggleInspectMode(false);
+      }
+    });
+    
+    // Enter key on prompt input
+    promptInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        e.stopPropagation();
+        promptSubmit.click();
+      }
+    });
+    
+    // Text input handlers (if exists)
+    if (isTextElement) {
+      const textInput = controlBox.querySelector('#inspector-text-input');
+      const textSubmit = controlBox.querySelector('#inspector-text-submit');
+      
+      textSubmit.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const newText = textInput.value;
+        if (window.parent !== window) {
+          window.parent.postMessage({
+            type: 'INSPECTOR_TEXT_UPDATED',
+            data: {
+              text: newText,
+              originalText: currentText,
+              element: elementData
+            }
+          }, '*');
+        }
+        console.log('Text updated:', newText);
+        
+        // Turn off inspect mode after updating
+        toggleInspectMode(false);
+      });
+      
+      textInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          e.stopPropagation();
+          textSubmit.click();
+        }
+      });
+      
+      // Prevent input events from bubbling
+      textInput.addEventListener('click', (e) => e.stopPropagation());
+    }
+    
+    // Prevent prompt input events from bubbling
+    promptInput.addEventListener('click', (e) => e.stopPropagation());
+    
+    // Close button
+    closeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      unpauseInspection();
+    });
+    
+    // Focus prompt input
+    setTimeout(() => promptInput.focus(), 100);
+  }
+  
+  // Pause inspection
+  function pauseInspection(element, elementData) {
+    isPaused = true;
+    selectedElement = element;
+    selectedElementData = elementData;
+    
+    // Disable scrolling
+    document.body.style.overflow = 'hidden';
+    
+    // Keep overlay visible
+    highlightElement(element);
+    overlay.style.borderColor = '#10b981';
+    overlay.style.background = 'rgba(16, 185, 129, 0.1)';
+    
+    // Remove hover listeners
+    document.removeEventListener('mousemove', handleMouseMove, true);
+    
+    // Create control box
+    createControlBox(element, elementData);
+  }
+  
+  // Unpause inspection
+  function unpauseInspection() {
+    isPaused = false;
+    selectedElement = null;
+    selectedElementData = null;
+    
+    // Re-enable scrolling
+    document.body.style.overflow = '';
+    
+    // Remove control box
+    if (controlBox) {
+      controlBox.remove();
+      controlBox = null;
+    }
+    
+    // Restore overlay style
+    if (overlay) {
+      overlay.style.borderColor = '#3b82f6';
+      overlay.style.background = 'rgba(59, 130, 246, 0.1)';
+    }
+    
+    // Re-enable hover
+    if (inspectMode) {
+      document.addEventListener('mousemove', handleMouseMove, true);
+    }
+  }
+
+  // Get React Fiber node from DOM element
+  function getReactFiber(element) {
+    const key = Object.keys(element).find(k => 
+      k.startsWith('__reactFiber') || 
+      k.startsWith('__reactInternalInstance')
+    );
+    return key ? element[key] : null;
+  }
+
+  // Find component file and line info from fiber
+  function getComponentInfo(fiber) {
+    let current = fiber;
+    while (current) {
+      // Check if fiber has _debugSource (development mode)
+      if (current._debugSource) {
+        const source = current._debugSource;
+        return {
+          fileName: source.fileName,
+          lineNumber: source.lineNumber,
+          columnNumber: source.columnNumber,
+          componentName: current.type?.name || current.elementType?.name || 'Unknown'
+        };
+      }
+      
+      // Check if fiber has _debugOwner
+      if (current._debugOwner) {
+        current = current._debugOwner;
+        continue;
+      }
+      
+      // Try return fiber (parent component)
+      if (current.return) {
+        current = current.return;
+        continue;
+      }
+      
+      break;
+    }
+    return null;
+  }
+
+  // Highlight element
+  function highlightElement(element) {
+    if (!overlay || !element) return;
+    
+    const rect = element.getBoundingClientRect();
+    overlay.style.display = 'block';
+    overlay.style.top = rect.top + window.scrollY + 'px';
+    overlay.style.left = rect.left + window.scrollX + 'px';
+    overlay.style.width = rect.width + 'px';
+    overlay.style.height = rect.height + 'px';
+  }
+
+  // Clear highlight
+  function clearHighlight() {
+    if (overlay) {
+      overlay.style.display = 'none';
+    }
+  }
+
+  // Handle mouse move
+  function handleMouseMove(e) {
+    if (!inspectMode || isPaused) return;
+    
+    // Ignore control box and overlay
+    if (e.target.id === 'inspector-control-box' || 
+        e.target.closest('#inspector-control-box') ||
+        e.target.id === 'inspector-overlay') {
+      return;
+    }
+    
+    hoveredElement = e.target;
+    highlightElement(hoveredElement);
+  }
+
+  // Handle click
+  function handleClick(e) {
+    if (!inspectMode) return;
+    
+    // Ignore clicks on control box
+    if (e.target.id === 'inspector-control-box' || 
+        e.target.closest('#inspector-control-box')) {
+      return;
+    }
+    
+    // If already paused, ignore clicks (don't select new element)
+    if (isPaused) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const element = e.target;
+    const fiber = getReactFiber(element);
+    const componentInfo = fiber ? getComponentInfo(fiber) : null;
+    
+    const elementData = {
+      tagName: element.tagName,
+      className: element.className,
+      id: element.id,
+      component: componentInfo,
+      position: {
+        top: element.getBoundingClientRect().top,
+        left: element.getBoundingClientRect().left,
+        width: element.getBoundingClientRect().width,
+        height: element.getBoundingClientRect().height
+      }
+    };
+    
+    // Send info to parent window
+    if (window.parent !== window) {
+      window.parent.postMessage({
+        type: 'INSPECTOR_ELEMENT_SELECTED',
+        data: elementData
+      }, '*');
+    }
+    
+    // Log for debugging
+    console.log('Element selected:', {
+      element,
+      componentInfo
+    });
+    
+    // Pause inspection and show control box
+    pauseInspection(element, elementData);
+  }
+
+  // Toggle inspect mode
+  function toggleInspectMode(active) {
+    inspectMode = active;
+    
+    if (inspectMode) {
+      createOverlay();
+      document.body.style.cursor = 'crosshair';
+      document.addEventListener('mousemove', handleMouseMove, true);
+      document.addEventListener('click', handleClick, true);
+    } else {
+      // Clean up everything
+      clearHighlight();
+      unpauseInspection();
+      document.body.style.cursor = '';
+      document.removeEventListener('mousemove', handleMouseMove, true);
+      document.removeEventListener('click', handleClick, true);
+    }
+  }
+
+  // Listen for messages from parent
+  window.addEventListener('message', (event) => {
+    if (event.data.type === 'TOGGLE_INSPECTOR') {
+      toggleInspectMode(event.data.active);
+      
+      // Update labels if provided
+      if (event.data.labels) {
+        labels = { ...labels, ...event.data.labels };
+      }
+    }
+  });
+
+  // Track URL changes
+  let lastUrl = location.href;
+  
+  function notifyUrlChange() {
+    const newUrl = location.href;
+    if (newUrl !== lastUrl) {
+      lastUrl = newUrl;
+      
+      if (window.parent !== window) {
+        window.parent.postMessage({
+          type: 'URL_CHANGED',
+          data: {
+            url: newUrl,
+            pathname: location.pathname,
+            search: location.search,
+            hash: location.hash
+          }
+        }, '*');
+      }
+    }
+  }
+
+  // Monitor URL changes via pushState/replaceState
+  const originalPushState = history.pushState;
+  const originalReplaceState = history.replaceState;
+  
+  history.pushState = function() {
+    originalPushState.apply(this, arguments);
+    notifyUrlChange();
+  };
+  
+  history.replaceState = function() {
+    originalReplaceState.apply(this, arguments);
+    notifyUrlChange();
+  };
+  
+  // Also listen to popstate
+  window.addEventListener('popstate', notifyUrlChange);
+  
+  // Initial URL notification
+  setTimeout(() => {
+    notifyUrlChange();
+  }, 100);
+
+  // Error tracking
+  // Save original console.error FIRST before any functions
+  const originalConsoleError = console.error;
+  
+  function sendError(errorData) {
+    if (window.parent !== window) {
+      window.parent.postMessage({
+        type: 'INSPECTOR_ERROR',
+        data: errorData
+      }, '*');
+    }
+    // Use original console.error to avoid infinite loop
+    originalConsoleError.call(console, '🔍 Inspector Error:', errorData);
+  }
+
+  // Track JavaScript errors
+  window.addEventListener('error', (event) => {
+    sendError({
+      type: 'javascript',
+      message: event.message,
+      stack: event.error?.stack,
+      fileName: event.filename,
+      lineNumber: event.lineno,
+      columnNumber: event.colno,
+      timestamp: Date.now()
+    });
+  });
+
+  // Track unhandled promise rejections
+  window.addEventListener('unhandledrejection', (event) => {
+    sendError({
+      type: 'promise',
+      message: event.reason?.message || String(event.reason),
+      stack: event.reason?.stack,
+      timestamp: Date.now()
+    });
+  });
+
+  // Track console.error calls
+  console.error = function(...args) {
+    const message = args.map(arg => 
+      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+    ).join(' ');
+    
+    sendError({
+      type: 'console',
+      message: message,
+      stack: new Error().stack,
+      timestamp: Date.now()
+    });
+    
+    // Call original console.error
+    originalConsoleError.apply(console, args);
+  };
+
+  console.log('🔍 Inspector plugin loaded');
+})();
+            `,
+                        injectTo: "body",
+                    },
+                ],
+            };
+        },
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Shared types for @promake/inspector
+ */
+export interface ComponentInfo {
+    componentName: string;
+    fileName: string;
+    lineNumber: number;
+    columnNumber: number;
+}
+export interface ElementPosition {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface SelectedElementData {
+    tagName: string;
+    className: string;
+    id: string;
+    component: ComponentInfo | null;
+    position: ElementPosition;
+}
+export interface UrlChangeData {
+    url: string;
+    pathname: string;
+    search: string;
+    hash: string;
+}
+export interface PromptSubmittedData {
+    prompt: string;
+    element: SelectedElementData;
+}
+export interface TextUpdatedData {
+    text: string;
+    originalText: string;
+    element: SelectedElementData;
+}
+export interface ErrorData {
+    type: "javascript" | "promise" | "console";
+    message: string;
+    stack?: string;
+    fileName?: string;
+    lineNumber?: number;
+    columnNumber?: number;
+    timestamp: number;
+}
+export interface InspectorLabels {
+    editText?: string;
+    textPlaceholder?: string;
+    updateText?: string;
+    promptPlaceholder?: string;
+}
+export interface InspectorCallbacks {
+    onElementSelected?: (data: SelectedElementData) => void;
+    onUrlChange?: (data: UrlChangeData) => void;
+    onPromptSubmitted?: (data: PromptSubmittedData) => void;
+    onTextUpdated?: (data: TextUpdatedData) => void;
+    onError?: (data: ErrorData) => void;
+}
+export interface UseInspectorReturn {
+    isInspecting: boolean;
+    toggleInspector: (active?: boolean) => void;
+    startInspecting: () => void;
+    stopInspecting: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAGD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAGD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAGD,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAGD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,mBAAmB,CAAC;CAC9B;AAGD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAGD,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACrC;AAGD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B"}

package/dist/types.js

@@ -0,0 +1,4 @@
+/**
+ * Shared types for @promake/inspector
+ */
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@promakeai/inspector",
+  "version": "0.0.1",
+  "description": "Visual element inspector for React apps in iframe with AI prompt support",
+  "author": "Promake",
+  "type": "module",
+  "main": "./dist/hook.js",
+  "module": "./dist/hook.js",
+  "types": "./dist/hook.d.ts",
+  "exports": {
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.js"
+    },
+    "./hook": {
+      "types": "./dist/hook.d.ts",
+      "import": "./dist/hook.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && tsc -p tsconfig.plugin.json",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vite",
+    "react",
+    "inspector",
+    "devtools",
+    "iframe",
+    "visual-editor",
+    "element-inspector",
+    "ai",
+    "prompt"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "vite": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.4.0"
+  }
+}