@promakeai/inspector 0.2.2 → 1.0.1

package/README.md

@@ -1,866 +0,0 @@
-# @promakeai/inspector
-
-[![Build Status](https://github.com/promakeai/inspector/actions/workflows/build.yml/badge.svg)](https://github.com/promakeai/inspector/actions/workflows/build.yml)
-[![Tests](https://github.com/promakeai/inspector/actions/workflows/test.yml/badge.svg)](https://github.com/promakeai/inspector/actions/workflows/test.yml)
-[![npm version](https://badge.fury.io/js/@promakeai%2Finspector.svg)](https://www.npmjs.com/package/@promakeai/inspector)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-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
-- 📝 **Dynamic Content Input** - Show/hide text editing on-demand with `showContentInput()`
-- 🖼️ **Image Upload Support** - Custom drag & drop image uploader with preview
-- ⚡ **Immediate DOM Updates** - Optional instant feedback while backend processes
-- 🤖 **AI Prompt Support** - Always-visible prompt input for AI 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 Theme** - Full color customization for all UI elements
-- 🌍 **Customizable Labels** - Multi-language support
-- 🚫 **Ignore Elements** - Mark elements as non-inspectable with `data-inspector-ignore`
-- 🔍 **Text Node Detection** - Automatically detect if selected element is a text node
-- 🖼️ **Image Node Detection** - Automatically detect if selected element is an image
-- 🏷️ **Promake Badge** - Optional "Built by Promake" badge with smooth animations
-- 🔍 **Element Highlighting** - Revisit and highlight previously inspected elements
-- 🆔 **Persistent Element IDs** - Structural signature-based IDs that survive page reloads
-- 🔄 **Reload-Safe Highlighting** - Same element gets same ID even after refresh
-- 🎯 **Smart Fallback** - Position-based matching when DOM structure changes
-- 📦 **TypeScript** - Full type safety
-- ✅ **Well Tested** - 42 unit tests + 35 e2e tests with 90%+ coverage
-
-## 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, 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);
-
-          // Access component info
-          console.log(data.component?.fileName);
-          console.log(data.component?.lineNumber);
-
-          // Show content input if it's a text node
-          if (data.isTextNode) {
-            showContentInput(true);
-          }
-
-          // Show image input if it's an image node
-          if (data.isImageNode) {
-            showImageInput(true);
-          }
-        },
-        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
-        },
-        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.
-        },
-        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...",
-        editImage: "Change Image",
-        imageUploadTitle: "Select Image",
-        imageUploadHint: "Click or drag",
-        updateImage: "Update Image",
-        badgeText: "Built with Promake",
-      },
-      {
-        // Optional: Custom theme colors
-        backgroundColor: "#ffffff",
-        textColor: "#111827",
-        buttonColor: "#4417db",
-        buttonTextColor: "#ffffff",
-        inputBackgroundColor: "#f9fafb",
-        inputTextColor: "#111827",
-        inputBorderColor: "#d1d5db",
-        badgeGradientStart: "#411E93",
-        badgeGradientEnd: "#E87C85",
-        badgeTextColor: "#ffffff",
-      }
-    );
-
-  return (
-    <div>
-      <button onClick={() => toggleInspector()}>
-        {isInspecting ? "Stop Inspector" : "Start Inspector"}
-      </button>
-
-      {/* Optional: Manual content input toggle */}
-      {isInspecting && (
-        <button onClick={() => showContentInput(true)}>
-          Show Content Input
-        </button>
-      )}
-
-      <iframe ref={iframeRef} src="http://localhost:5173" />
-    </div>
-  );
-}
-```
-
-## API
-
-### `useInspector(iframeRef, callbacks?, labels?, theme?)`
-
-#### Parameters
-
-- **iframeRef**: `RefObject<HTMLIFrameElement>` - Reference to the iframe element
-- **callbacks**: `InspectorCallbacks` (optional)
-  - `onElementSelected`: Called when an element is selected (receives `isTextNode` and `isImageNode` properties)
-  - `onPromptSubmitted`: Called when AI prompt is submitted
-  - `onTextUpdated`: Called when text content is updated
-  - `onImageUpdated`: Called when image is uploaded
-  - `onInspectorClosed`: Called when inspector mode is closed (after submitting prompt/text/image)
-  - `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
-  - `editImage`: Label for image edit section
-  - `imageUploadTitle`: Upload box title (e.g., "Select Image")
-  - `imageUploadHint`: Upload box hint (e.g., "Click or drag")
-  - `updateImage`: Label for image update button
-  - `badgeText`: Badge text (default: "Built with Promake")
-- **theme**: `InspectorTheme` (optional)
-  - `backgroundColor`: Box background color (default: `#ffffff`)
-  - `textColor`: Text color (default: `#111827`)
-  - `buttonColor`: Button background color (default: `#4417db`)
-  - `buttonTextColor`: Button text color (default: `#ffffff`)
-  - `inputBackgroundColor`: Input background color (default: `#f9fafb`)
-  - `inputTextColor`: Input text color (default: `#111827`)
-  - `inputBorderColor`: Input border color (default: `#d1d5db`)
-  - `badgeGradientStart`: Badge gradient start color (default: `#411E93`)
-  - `badgeGradientEnd`: Badge gradient end color (default: `#E87C85`)
-  - `badgeTextColor`: Badge text color (default: `#ffffff`)
-
-#### Returns
-
-- **isInspecting**: `boolean` - Current inspection state
-- **toggleInspector**: `(active?: boolean) => void` - Toggle inspection mode
-- **startInspecting**: `() => void` - Start inspecting
-- **stopInspecting**: `() => void` - Stop inspecting
-- **showContentInput**: `(show: boolean, updateImmediately?: boolean) => void` - Show or hide text content input dynamically. If `updateImmediately` is true, DOM is updated immediately on submit (useful for slow backend responses)
-- **showImageInput**: `(show: boolean, updateImmediately?: boolean) => void` - Show or hide image input dynamically. If `updateImmediately` is true, DOM is updated immediately on submit (useful for slow backend responses)
-- **setBadgeVisible**: `(visible: boolean) => void` - Show or hide "Built by Promake" badge in bottom-right corner
-- **highlightElement**: `(identifier: string | ElementIdentifier, options?: HighlightOptions) => void` - Highlight an element in the iframe by ID or selector
-- **getElementByInspectorId**: `(inspectorId: string) => void` - Request element info by unique inspector ID
-
-## Types
-
-### `SelectedElementData`
-
-```typescript
-interface SelectedElementData {
-  tagName: string;
-  className: string;
-  id: string;
-  component: ComponentInfo | null;
-  position: ElementPosition;
-  isTextNode?: boolean; // Whether the element is a text node
-  textContent?: string; // Text content of the element (if text node)
-  isImageNode?: boolean; // Whether the element is an image node
-  imageUrl?: string; // Image URL (if image node)
-  inspectorId?: string; // Unique inspector ID for element tracking
-  selector?: string; // CSS selector for element identification
-}
-```
-
-### `ElementIdentifier`
-
-```typescript
-interface ElementIdentifier {
-  inspectorId: string; // Unique ID (primary)
-  selector: string; // CSS selector (fallback)
-  position?: {
-    // Position (for disambiguation)
-    top: number;
-    left: number;
-  };
-  component?: {
-    // Component info (metadata)
-    name: string;
-    fileName: string;
-    lineNumber?: number;
-  };
-}
-```
-
-### `HighlightOptions`
-
-```typescript
-interface HighlightOptions {
-  duration?: number; // Highlight duration in ms (default: 3000)
-  scrollIntoView?: boolean; // Scroll to element (default: true)
-  color?: string; // Highlight color (default: '#4417db')
-  animation?: "pulse" | "fade" | "none"; // Animation type (default: 'pulse')
-}
-```
-
-## Element Identification & Persistence
-
-Inspector uses a **structural signature-based ID system** to ensure the same element gets the same ID across page reloads, making it perfect for features like chat history highlighting.
-
-### How Persistent IDs Work
-
-#### ID Format
-
-```
-pi-{hash}
-```
-
-Example: `pi-1f2a3b4c`
-
-#### ID Generation
-
-IDs are generated based on element's structural properties:
-
-1. **XPath** - DOM tree position (primary identifier)
-2. **Static Identifiers** - `id`, `data-id`, `data-testid`, `data-component`, `data-cy`
-3. **Semantic Properties** - `tag`, `role`, `type`, `name`, `href`, `src`
-4. **Structural Context** - sibling index, parent tag (if no static ID)
-
-**Excluded for Stability:**
-
-- ❌ Class names (frequently change)
-- ❌ Text content (dynamic)
-- ❌ Style attributes (dynamic)
-
-#### Consistency Guarantees
-
-✅ **Same element → Same ID** (across page reloads)  
-✅ **Class changes → ID unchanged**  
-✅ **Text changes → ID unchanged**  
-✅ **Style changes → ID unchanged**  
-❌ **DOM position changes → Different ID** (new structure = new ID)
-
-#### Best Practices for Maximum Consistency
-
-To ensure the most reliable element identification:
-
-```html
-<!-- ✅ Best: Use data-id for elements you want to reliably track -->
-<div data-id="hero-section">...</div>
-<button data-id="cta-button">...</button>
-
-<!-- ✅ Good: Use element.id -->
-<div id="main-content">...</div>
-
-<!-- ✅ Good: Use data-testid -->
-<button data-testid="submit-form">...</button>
-
-<!-- ⚠️ Okay: Relies on DOM position (changes if DOM structure changes) -->
-<div class="card">...</div>
-```
-
-#### Fallback System
-
-If an element's ID changes (e.g., DOM restructure), the system uses smart fallbacks:
-
-1. **Primary**: Try to find by `inspectorId`
-2. **Fallback 1**: Use CSS selector
-3. **Fallback 2**: Use position matching (if multiple matches)
-
-```typescript
-// Full identifier with fallback support
-highlightElement({
-  inspectorId: "pi-1f2a3b4c", // Primary
-  selector: "button.cta-primary", // Fallback 1
-  position: { top: 500, left: 100 }, // Fallback 2
-});
-```
-
-### `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;
-}
-```
-
-### `ImageUpdatedData`
-
-```typescript
-interface ImageUpdatedData {
-  imageData: string; // Base64 encoded image data
-  imageFile: {
-    name: string;
-    size: number;
-    type: string;
-  };
-  originalImageUrl: string;
-  element: SelectedElementData;
-}
-```
-
-### `ErrorData`
-
-```typescript
-interface ErrorData {
-  type: "javascript" | "promise" | "console";
-  message: string;
-  stack?: string;
-  fileName?: string;
-  lineNumber?: number;
-  columnNumber?: number;
-  timestamp: number;
-}
-```
-
-### `InspectorLabels`
-
-```typescript
-interface InspectorLabels {
-  editText?: string; // Label for text edit section
-  textPlaceholder?: string; // Placeholder for text input
-  updateText?: string; // Label for text update button
-  promptPlaceholder?: string; // Placeholder for prompt input
-  editImage?: string; // Label for image edit section
-  imageUploadTitle?: string; // Upload box title (e.g., "Select Image")
-  imageUploadHint?: string; // Upload box hint (e.g., "Click or drag")
-  updateImage?: string; // Label for image update button
-  badgeText?: string; // Badge text (default: "Built with Promake")
-}
-```
-
-### `InspectorTheme`
-
-```typescript
-interface InspectorTheme {
-  backgroundColor?: string; // Box background color
-  textColor?: string; // Text color
-  buttonColor?: string; // Button background color
-  buttonTextColor?: string; // Button text color
-  inputBackgroundColor?: string; // Input background color
-  inputTextColor?: string; // Input text color
-  inputBorderColor?: string; // Input border color
-  badgeGradientStart?: string; // Badge gradient start color
-  badgeGradientEnd?: string; // Badge gradient end color
-  badgeTextColor?: string; // Badge text color
-}
-```
-
-## 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 (always shows prompt input)
-- Pause scrolling
-- Extract React component information
-- Detect if element is a text-only node (`isTextNode`)
-- Detect if element is an image node (`isImageNode`)
-
-### Dynamic Content Input
-
-The inspector now uses a three-stage approach:
-
-1. **Prompt Input (Always Visible)**: Every element shows a prompt input for AI instructions
-2. **Text Content Input (On-Demand)**: Text editing appears only when you call `showContentInput(true)`
-3. **Image Upload (On-Demand)**: Image upload appears only when you call `showImageInput(true)`
-
-This allows you to:
-
-- Run AI computations after selection
-- Decide programmatically when to show text editing or image upload
-- Keep the UI clean and focused
-
-```typescript
-onElementSelected: (data) => {
-  if (data.isTextNode) {
-    // Show content input above prompt input
-    // Pass true as second parameter for immediate DOM update
-    showContentInput(true, true);
-  }
-
-  if (data.isImageNode) {
-    // Show image upload for images
-    // Pass true as second parameter for immediate DOM update
-    showImageInput(true, true);
-  }
-};
-```
-
-### Image Upload
-
-For image elements:
-
-- **Custom Upload Box**: Dashed border box with drag & drop support
-- **Click to Upload**: Click the box to select image from file explorer
-- **Drag & Drop**: Drag image files directly onto the upload box
-- **Preview**: Selected image appears in the same box (max 100px height)
-- **Base64 Encoding**: Image is automatically converted to base64
-- **File Metadata**: File name, size, and type are included
-
-The image data is sent to parent app with `onImageUpdated` callback for upload to your server.
-
-### Immediate DOM Updates
-
-For production environments where backend processing takes time, you can enable immediate DOM updates:
-
-```typescript
-// Text updates - DOM is updated immediately, no wait for backend
-showContentInput(true, true); // updateImmediately: true
-
-// Image updates - Image appears immediately, no wait for backend
-showImageInput(true, true); // updateImmediately: true
-```
-
-**How it works:**
-
-1. **Text Updates**: When user submits new text, the DOM text content is updated immediately
-2. **Image Updates**: When user selects an image, the `<img>` src (or background-image) is updated immediately with base64 data
-3. **Backend Sync**: The `onTextUpdated` or `onImageUpdated` callback is still fired for backend sync
-4. **User Experience**: User sees instant feedback, while your backend processes in the background
-
-This is perfect for:
-
-- Slow API responses
-- AI processing that takes seconds
-- Upload-heavy operations
-- Better perceived performance
-
-### Promake Badge
-
-Show a beautiful "Built with Promake" badge in the bottom-right corner:
-
-```typescript
-// Show badge with default text ("Built with Promake")
-setBadgeVisible(true);
-
-// Hide badge
-setBadgeVisible(false);
-
-// Customize badge text via labels
-const { setBadgeVisible } = useInspector(iframeRef, callbacks, {
-  badgeText: "Made with ❤️ by MyCompany",
-});
-
-// Customize badge colors via theme
-const { setBadgeVisible } = useInspector(
-  iframeRef,
-  callbacks,
-  undefined, // no custom labels
-  {
-    badgeGradientStart: "#10b981", // Green
-    badgeGradientEnd: "#3b82f6", // Blue
-    badgeTextColor: "#ffffff", // White text
-  }
-);
-
-// Dark badge with light text
-const { setBadgeVisible } = useInspector(iframeRef, callbacks, undefined, {
-  badgeGradientStart: "#1e293b", // Dark slate
-  badgeGradientEnd: "#334155", // Slate
-  badgeTextColor: "#f8fafc", // Light text
-});
-```
-
-**Features:**
-
-- 🎨 Beautiful gradient design (purple to violet by default)
-- ⚡ Smooth fade-in/fade-out animations
-- 🖱️ Hover effects with elevation
-- 🔗 Clickable - opens promake.ai in new tab
-- 📍 Fixed position in bottom-right
-- 🚫 Ignored by inspector (has `data-inspector-ignore`)
-- 📝 Customizable text via labels
-- 🎨 Customizable gradient colors via theme
-- 🔤 Customizable text color via theme
-- ❌ Close button appears on hover - users can dismiss the badge
-
-**Default**: Badge is hidden by default. Enable it when needed using `setBadgeVisible(true)`. Default text is "Built with Promake". Default gradient colors are deep purple (#411E93) to coral pink (#E87C85). Default text color is white (#ffffff).
-
-**Auto-Show**: Badge automatically appears when the app is running in `preview.promake.ai` environment **without** a parent iframe. This ensures the badge is visible in preview deployments where parent control is not available.
-
-**Close Button**: When users hover over the badge, a small close button (×) appears in the top-right corner. Clicking it hides the badge with a smooth animation.
-
-**Color Examples:**
-
-**Gradient Backgrounds:**
-
-- **Deep Purple to Coral Pink** (default): `#411E93` → `#E87C85` (white text)
-- **Blue to Cyan**: `#3b82f6` → `#06b6d4` (white text)
-- **Green to Emerald**: `#10b981` → `#059669` (white text)
-- **Pink to Rose**: `#ec4899` → `#f43f5e` (white text)
-- **Orange to Red**: `#f97316` → `#ef4444` (white text)
-- **Dark Slate**: `#1e293b` → `#334155` (light text `#f8fafc`)
-
-**Text Colors:**
-
-- **White** (default): `#ffffff`
-- **Light**: `#f8fafc`, `#f1f5f9`
-- **Dark**: `#111827`, `#1e293b`
-- **Brand Colors**: Match your brand palette
-
-**Auto-Show Behavior:**
-
-The badge automatically appears in these conditions:
-
-1. The app is **not** inside an iframe (`window.parent === window`)
-2. The URL contains `preview.promake.ai`
-
-This ensures the badge is visible in Promake preview deployments where parent window control is unavailable. Users can still close it using the close button on hover.
-
-**Use Cases:**
-
-- Show attribution to Promake
-- Free tier watermark for preview deployments
-- Branding for templates built with Promake
-- Custom branding with your own text and colors
-- Automatic display in preview environments
-
-### AI Prompts
-
-For any element:
-
-- Prompt input is always visible
-- Enter a prompt describing desired changes
-- Click the send button (↑)
-- Prompt + element data sent to parent app
-
-### Ignoring Elements
-
-Mark elements as non-inspectable using the `data-inspector-ignore` attribute:
-
-```jsx
-<button data-inspector-ignore onClick={toggleInspect}>
-  Inspector Controls
-</button>
-
-<div data-inspector-ignore>
-  {/* All children will be ignored too */}
-  <button>Button 1</button>
-  <button>Button 2</button>
-</div>
-```
-
-This is perfect for:
-
-- Inspector control buttons
-- Floating toolbars
-- Fixed navigation
-- Any UI that shouldn't be inspectable
-
-### 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
-
-### Element Highlighting from Chat History
-
-```typescript
-const { highlightElement, getElementByInspectorId } = useInspector(iframeRef, {
-  onElementSelected: (data) => {
-    // Store inspectorId in your chat message
-    const message = {
-      text: `Selected ${data.tagName} element`,
-      inspectorId: data.inspectorId,
-      selector: data.selector,
-      position: data.position,
-    };
-    saveToChatHistory(message);
-  },
-  onElementInfoReceived: (data) => {
-    if (data.found) {
-      console.log("Element found:", data.element);
-    } else {
-      console.log("Element not found:", data.error);
-    }
-  },
-});
-
-// Later: Click on a chat message to re-highlight the element
-function handleChatMessageClick(message) {
-  // Highlight with full identifier (with fallback support)
-  highlightElement(
-    {
-      inspectorId: message.inspectorId,
-      selector: message.selector,
-      position: message.position,
-    },
-    {
-      duration: 4000,
-      color: "#10b981",
-      animation: "pulse",
-    }
-  );
-}
-
-// Or simply by ID
-function quickHighlight(inspectorId) {
-  highlightElement(inspectorId);
-}
-
-// Request element info
-function checkElementStatus(inspectorId) {
-  getElementByInspectorId(inspectorId);
-}
-```
-
-### Dynamic Content Input Based on AI Response
-
-```typescript
-const { toggleInspector, showContentInput } = useInspector(iframeRef, {
-  onElementSelected: async (data) => {
-    // Run AI analysis first
-    const analysis = await analyzeElement(data);
-
-    // Show content input only if AI suggests text editing
-    if (analysis.shouldShowTextEditor && data.isTextNode) {
-      showContentInput(true);
-    }
-  },
-  onPromptSubmitted: async (data) => {
-    // Process AI prompt
-    const result = await processAIPrompt(data.prompt, data.element);
-
-    // Optionally show content input after AI processing
-    if (result.needsTextInput) {
-      showContentInput(true);
-    }
-  },
-});
-```
-
-### Dark Theme
-
-```typescript
-const { toggleInspector } = useInspector(iframeRef, callbacks, labels, {
-  backgroundColor: "#1a1a1a",
-  textColor: "#ffffff",
-  buttonColor: "#00ff00",
-  buttonTextColor: "#000000",
-  inputBackgroundColor: "#2a2a2a",
-  inputTextColor: "#ffffff",
-  inputBorderColor: "#444444",
-});
-```
-
-### Multi-language Support
-
-```typescript
-const { toggleInspector } = useInspector(iframeRef, callbacks, {
-  editText: "Metni Düzenle",
-  textPlaceholder: "Metin girin...",
-  updateText: "Güncelle",
-  promptPlaceholder: "Promake'e değişiklik sor...",
-});
-```
-
-### Prevent Inspector Buttons from Being Selected
-
-```jsx
-function App() {
-  return (
-    <div>
-      {/* These buttons won't be inspectable */}
-      <div className="inspector-controls" data-inspector-ignore>
-        <button onClick={toggleInspect}>Toggle Inspector</button>
-        <button onClick={() => showContentInput(true)}>
-          Show Content Input
-        </button>
-      </div>
-
-      <iframe ref={iframeRef} src="http://localhost:5173" />
-    </div>
-  );
-}
-```
-
-### 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)
-
-## CI/CD
-
-This project includes GitHub Actions workflow:
-
-### Build Workflow (`.github/workflows/build.yml`)
-
-Automatically runs on every push and pull request:
-
-- ✅ Uses Bun for fast installation and build
-- ✅ Runs `bun install` and `bun run build`
-- ✅ Checks for build artifacts
-- ✅ Uploads build artifacts for review
-
-## License
-
-MIT
-
-## Contributing
-
-Issues and pull requests are welcome!
-
-## Author
-
-Promake