@promakeai/inspector 0.0.1 → 0.0.4

package/README.md

@@ -1,18 +1,25 @@
 # @promakeai/inspector
 
+[![Build Status](https://github.com/promakeai/inspector/actions/workflows/build.yml/badge.svg)](https://github.com/promakeai/inspector/actions/workflows/build.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
-- 📝 **Text Editing** - Edit text content directly
-- 🤖 **AI Prompt Support** - Send prompts to AI for element modifications
+- 📝 **Dynamic Content Input** - Show/hide text editing on-demand with `showContentInput()`
+- 🤖 **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 Labels** - Multi-language support
+- 🎨 **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
 - 📦 **TypeScript** - Full type safety
 
 ## Installation
@@ -48,14 +55,21 @@ import { useInspector } from "@promakeai/inspector/hook";
 function App() {
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  const { isInspecting, toggleInspector } = useInspector(
+  const { isInspecting, toggleInspector, showContentInput } = useInspector(
     iframeRef,
     {
       onElementSelected: (data) => {
         console.log("Element selected:", data);
+        console.log("Is text node:", data.isTextNode);
+
         // 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);
+        }
       },
       onPromptSubmitted: (data) => {
         console.log("AI Prompt:", data.prompt);
@@ -87,6 +101,16 @@ function App() {
       textPlaceholder: "Enter text...",
       updateText: "Update",
       promptPlaceholder: "Ask AI for changes...",
+    },
+    {
+      // Optional: Custom theme colors
+      backgroundColor: "#ffffff",
+      textColor: "#111827",
+      buttonColor: "#4417db",
+      buttonTextColor: "#ffffff",
+      inputBackgroundColor: "#f9fafb",
+      inputTextColor: "#111827",
+      inputBorderColor: "#d1d5db",
     }
   );
 
@@ -96,6 +120,13 @@ function App() {
         {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>
   );
@@ -104,13 +135,13 @@ function App() {
 
 ## API
 
-### `useInspector(iframeRef, callbacks?, labels?)`
+### `useInspector(iframeRef, callbacks?, labels?, theme?)`
 
 #### Parameters
 
 - **iframeRef**: `RefObject<HTMLIFrameElement>` - Reference to the iframe element
 - **callbacks**: `InspectorCallbacks` (optional)
-  - `onElementSelected`: Called when an element is selected
+  - `onElementSelected`: Called when an element is selected (receives `isTextNode` property)
   - `onPromptSubmitted`: Called when AI prompt is submitted
   - `onTextUpdated`: Called when text content is updated
   - `onUrlChange`: Called when URL changes in iframe
@@ -120,6 +151,14 @@ function App() {
   - `textPlaceholder`: Placeholder for text input
   - `updateText`: Label for update button
   - `promptPlaceholder`: Placeholder for prompt input
+- **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`)
 
 #### Returns
 
@@ -127,6 +166,7 @@ function App() {
 - **toggleInspector**: `(active?: boolean) => void` - Toggle inspection mode
 - **startInspecting**: `() => void` - Start inspecting
 - **stopInspecting**: `() => void` - Stop inspecting
+- **showContentInput**: `(show: boolean) => void` - Show or hide content input dynamically
 
 ## Types
 
@@ -139,6 +179,8 @@ interface SelectedElementData {
   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)
 }
 ```
 
@@ -186,6 +228,20 @@ interface ErrorData {
 }
 ```
 
+### `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
+}
+```
+
 ## Features in Detail
 
 ### Element Selection
@@ -193,26 +249,65 @@ interface ErrorData {
 Click any element to select it. The inspector will:
 
 - Show a blue highlight overlay
-- Display a control box below/above the element
+- 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`)
+
+### Dynamic Content Input
+
+The inspector now uses a two-stage approach:
+
+1. **Prompt Input (Always Visible)**: Every element shows a prompt input for AI instructions
+2. **Content Input (On-Demand)**: Text editing appears only when you call `showContentInput(true)`
 
-### Text Editing
+This allows you to:
 
-For text-only elements:
+- Run AI computations after selection
+- Decide programmatically when to show text editing
+- Keep the UI clean and focused
 
-- Textarea appears with current text
-- Edit and click "Update"
-- Event is sent to parent app
+```typescript
+onElementSelected: (data) => {
+  if (data.isTextNode) {
+    // Show content input above prompt input
+    showContentInput(true);
+  }
+};
+```
 
 ### 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:
@@ -243,6 +338,45 @@ Perfect for integrating with error tracking services like Sentry, LogRocket, or
 
 ## Examples
 
+### 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
@@ -250,10 +384,30 @@ const { toggleInspector } = useInspector(iframeRef, callbacks, {
   editText: "Metni Düzenle",
   textPlaceholder: "Metin girin...",
   updateText: "Güncelle",
-  promptPlaceholder: "AI için komut girin...",
+  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
@@ -303,6 +457,19 @@ const { toggleInspector } = useInspector(iframeRef, {
 - 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

package/dist/hook.d.ts

@@ -12,11 +12,17 @@
  * function App() {
  *   const iframeRef = useRef<HTMLIFrameElement>(null);
  *
- *   const { isInspecting, toggleInspector } = useInspector(
+ *   const { isInspecting, toggleInspector, showContentInput } = useInspector(
  *     iframeRef,
  *     {
  *       onElementSelected: (data) => {
  *         console.log('Element selected:', data);
+ *         console.log('Is text node:', data.isTextNode);
+ *
+ *         // Dynamically show content input for text nodes
+ *         if (data.isTextNode) {
+ *           showContentInput(true);
+ *         }
  *       },
  *       onPromptSubmitted: (data) => {
  *         console.log('AI Prompt:', data.prompt);
@@ -40,22 +46,37 @@
  *       textPlaceholder: 'Enter text...',
  *       updateText: 'Update',
  *       promptPlaceholder: 'Ask AI for changes...'
+ *     },
+ *     {
+ *       // Optional: Custom theme colors (all optional)
+ *       backgroundColor: '#ffffff',
+ *       textColor: '#111827',
+ *       buttonColor: '#4417db',
+ *       buttonTextColor: '#ffffff',
+ *       inputBackgroundColor: '#f9fafb',
+ *       inputTextColor: '#111827',
+ *       inputBorderColor: '#d1d5db'
  *     }
  *   );
  *
  *   return (
- *     <div>
- *       <button onClick={() => toggleInspector()}>
- *         {isInspecting ? 'Stop' : 'Start'} Inspector
- *       </button>
+ *     <>
+ *       <div data-inspector-ignore>
+ *         <button onClick={() => toggleInspector()}>
+ *           Toggle Inspector
+ *         </button>
+ *         <button onClick={() => showContentInput(true)}>
+ *           Show Content Input
+ *         </button>
+ *       </div>
  *       <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;
+import type { InspectorCallbacks, InspectorLabels, InspectorTheme, UseInspectorReturn } from "./types";
+export declare function useInspector(iframeRef: RefObject<HTMLIFrameElement>, callbacks?: InspectorCallbacks, labels?: InspectorLabels, theme?: InspectorTheme): UseInspectorReturn;
 export type * from "./types";
 //# sourceMappingURL=hook.d.ts.map

package/dist/hook.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../src/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AAEH,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,kBAAkB,EAMnB,MAAM,SAAS,CAAC;AAoCjB,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,GACrB,kBAAkB,CAsJpB;AAGD,mBAAmB,SAAS,CAAC"}

package/dist/hook.js

@@ -12,11 +12,17 @@
  * function App() {
  *   const iframeRef = useRef<HTMLIFrameElement>(null);
  *
- *   const { isInspecting, toggleInspector } = useInspector(
+ *   const { isInspecting, toggleInspector, showContentInput } = useInspector(
  *     iframeRef,
  *     {
  *       onElementSelected: (data) => {
  *         console.log('Element selected:', data);
+ *         console.log('Is text node:', data.isTextNode);
+ *
+ *         // Dynamically show content input for text nodes
+ *         if (data.isTextNode) {
+ *           showContentInput(true);
+ *         }
  *       },
  *       onPromptSubmitted: (data) => {
  *         console.log('AI Prompt:', data.prompt);
@@ -40,22 +46,37 @@
  *       textPlaceholder: 'Enter text...',
  *       updateText: 'Update',
  *       promptPlaceholder: 'Ask AI for changes...'
+ *     },
+ *     {
+ *       // Optional: Custom theme colors (all optional)
+ *       backgroundColor: '#ffffff',
+ *       textColor: '#111827',
+ *       buttonColor: '#4417db',
+ *       buttonTextColor: '#ffffff',
+ *       inputBackgroundColor: '#f9fafb',
+ *       inputTextColor: '#111827',
+ *       inputBorderColor: '#d1d5db'
  *     }
  *   );
  *
  *   return (
- *     <div>
- *       <button onClick={() => toggleInspector()}>
- *         {isInspecting ? 'Stop' : 'Start'} Inspector
- *       </button>
+ *     <>
+ *       <div data-inspector-ignore>
+ *         <button onClick={() => toggleInspector()}>
+ *           Toggle Inspector
+ *         </button>
+ *         <button onClick={() => showContentInput(true)}>
+ *           Show Content Input
+ *         </button>
+ *       </div>
  *       <iframe ref={iframeRef} src="http://localhost:5173" />
- *     </div>
+ *     </>
  *   );
  * }
  * ```
  */
 import { useEffect, useState, useCallback } from "react";
-export function useInspector(iframeRef, callbacks, labels) {
+export function useInspector(iframeRef, callbacks, labels, theme) {
     const [isInspecting, setIsInspecting] = useState(false);
     /**
      * Send message to iframe
@@ -83,8 +104,9 @@ export function useInspector(iframeRef, callbacks, labels) {
             type: "TOGGLE_INSPECTOR",
             active: newState,
             labels: labels,
+            theme: theme,
         });
-    }, [isInspecting, sendMessage, labels]);
+    }, [isInspecting, sendMessage, labels, theme]);
     /**
      * Start inspecting
      */
@@ -97,16 +119,38 @@ export function useInspector(iframeRef, callbacks, labels) {
     const stopInspecting = useCallback(() => {
         toggleInspector(false);
     }, [toggleInspector]);
+    /**
+     * Show or hide content input
+     */
+    const showContentInput = useCallback((show) => {
+        sendMessage({
+            type: "SHOW_CONTENT_INPUT",
+            show: show,
+        });
+    }, [sendMessage]);
     /**
      * 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;
+            const { type, data } = messageData;
             switch (type) {
                 case "INSPECTOR_ELEMENT_SELECTED":
                     callbacks?.onElementSelected?.(data);
@@ -142,6 +186,8 @@ export function useInspector(iframeRef, callbacks, labels) {
                 sendMessage({
                     type: "TOGGLE_INSPECTOR",
                     active: false,
+                    labels: labels,
+                    theme: theme,
                 });
             }
         };
@@ -151,5 +197,6 @@ export function useInspector(iframeRef, callbacks, labels) {
         toggleInspector,
         startInspecting,
         stopInspecting,
+        showContentInput,
     };
 }

package/dist/plugin.d.ts

@@ -22,12 +22,20 @@
  * Plugin özellikler:
  * - Element seçimi (click-to-select)
  * - React Fiber üzerinden component bilgisi çıkarma
- * - Text editing desteği
- * - AI prompt gönderme
+ * - Text node algılama (isTextNode)
+ * - Dinamik content input (showContentInput ile kontrol edilir)
+ * - AI prompt gönderme (her zaman görünür)
+ * - data-inspector-ignore desteği (belirli elementleri ignore etme)
  * - URL değişikliği takibi
  * - JavaScript hata yakalama (error, promise rejection, console.error)
+ * - Özelleştirilebilir tema renkleri
  * - Özelleştirilebilir dil desteği
  *
+ * Kullanım:
+ * - Elementlere data-inspector-ignore attribute'u ekleyerek inspector'dan gizleyebilirsiniz
+ * - Control box her zaman prompt input gösterir
+ * - Content input sadece showContentInput(true) ile dinamik olarak eklenir
+ *
  * Not: Bu plugin otomatik olarak template/iframe'e enjekte edilir.
  * Ana app'te useInspector hook'u ile kontrol edilir.
  */

package/dist/plugin.d.ts.map

@@ -1 +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"}
+{"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,CAyrBxC"}

package/dist/plugin.js

@@ -22,12 +22,20 @@
  * Plugin özellikler:
  * - Element seçimi (click-to-select)
  * - React Fiber üzerinden component bilgisi çıkarma
- * - Text editing desteği
- * - AI prompt gönderme
+ * - Text node algılama (isTextNode)
+ * - Dinamik content input (showContentInput ile kontrol edilir)
+ * - AI prompt gönderme (her zaman görünür)
+ * - data-inspector-ignore desteği (belirli elementleri ignore etme)
  * - URL değişikliği takibi
  * - JavaScript hata yakalama (error, promise rejection, console.error)
+ * - Özelleştirilebilir tema renkleri
  * - Özelleştirilebilir dil desteği
  *
+ * Kullanım:
+ * - Elementlere data-inspector-ignore attribute'u ekleyerek inspector'dan gizleyebilirsiniz
+ * - Control box her zaman prompt input gösterir
+ * - Content input sadece showContentInput(true) ile dinamik olarak eklenir
+ *
  * Not: Bu plugin otomatik olarak template/iframe'e enjekte edilir.
  * Ana app'te useInspector hook'u ile kontrol edilir.
  */
@@ -62,6 +70,17 @@ export function inspectorPlugin() {
     promptPlaceholder: 'Ask Promake for changes...'
   };
   
+  // Customizable theme colors
+  let theme = {
+    backgroundColor: '#ffffff',
+    textColor: '#111827',
+    buttonColor: '#4417db',
+    buttonTextColor: '#ffffff',
+    inputBackgroundColor: '#f9fafb',
+    inputTextColor: '#111827',
+    inputBorderColor: '#d1d5db'
+  };
+  
   // Create overlay for highlighting
   function createOverlay() {
     if (overlay) return overlay;
@@ -95,6 +114,10 @@ export function inspectorPlugin() {
     const isTextElement = element.textContent && element.children.length === 0;
     const currentText = isTextElement ? element.textContent.trim() : '';
     
+    // Store text info in data attribute for later use
+    controlBox.setAttribute('data-is-text-element', isTextElement);
+    controlBox.setAttribute('data-current-text', currentText);
+    
     // Calculate position
     const boxWidth = Math.max(320, Math.min(rect.width, 500));
     const centerLeft = rect.left + (rect.width / 2) - (boxWidth / 2);
@@ -102,8 +125,8 @@ export function inspectorPlugin() {
     const spaceBelow = viewportHeight - rect.bottom;
     const spaceAbove = rect.top;
     
-    // Estimate box height
-    const estimatedBoxHeight = isTextElement ? 280 : 180;
+    // Estimate box height (only prompt input now, smaller)
+    const estimatedBoxHeight = 100;
     
     // Show above if not enough space below
     let topPosition;
@@ -122,7 +145,7 @@ export function inspectorPlugin() {
       top: \${topPosition}px;
       left: \${Math.max(10, centerLeft)}px;
       width: \${boxWidth}px;
-      background: #ffffff;
+      background: \${theme.backgroundColor};
       border: 1px solid #e5e7eb;
       border-radius: 14px;
       padding: 12px;
@@ -130,80 +153,33 @@ export function inspectorPlugin() {
       z-index: 1000000;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       font-size: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
     \`;
     
-    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;">
+    // Only prompt input and buttons (always shown)
+    let html = \`
+      <div id="inspector-prompt-section" 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;"
+          style="flex: 1; padding: 10px 12px; border: 1px solid \${theme.inputBorderColor}; border-radius: 14px; font-size: 14px; color: \${theme.inputTextColor}; background: \${theme.inputBackgroundColor}; 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';"
+          onblur="this.style.background='\${theme.inputBackgroundColor}'; this.style.borderColor='\${theme.inputBorderColor}';"
         />
         <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';"
+          style="width: 44px; height: 44px; padding: 0; background: \${theme.buttonColor}; color: \${theme.buttonTextColor}; 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.opacity='0.85';"
+          onmouseout="this.style.opacity='1';"
           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;"
@@ -215,10 +191,8 @@ export function inspectorPlugin() {
             <path d="M12 4L4 12M4 4L12 12" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </button>
-      \`;
-    }
-    
-    html += \`</div>\`;
+      </div>
+    \`;
     
     controlBox.innerHTML = html;
     document.body.appendChild(controlBox);
@@ -234,13 +208,14 @@ export function inspectorPlugin() {
       const prompt = promptInput.value.trim();
       if (prompt) {
         if (window.parent !== window) {
-          window.parent.postMessage({
+          const message = JSON.stringify({
             type: 'INSPECTOR_PROMPT_SUBMITTED',
             data: {
               prompt: prompt,
               element: elementData
             }
-          }, '*');
+          });
+          window.parent.postMessage(message, '*');
         }
         console.log('Prompt submitted:', elementData);
         
@@ -257,23 +232,83 @@ export function inspectorPlugin() {
       }
     });
     
-    // Text input handlers (if exists)
-    if (isTextElement) {
-      const textInput = controlBox.querySelector('#inspector-text-input');
-      const textSubmit = controlBox.querySelector('#inspector-text-submit');
+    // 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);
+  }
+  
+  // Show or hide content input section
+  function toggleContentInput(show) {
+    if (!controlBox) return;
+    
+    const isTextElement = controlBox.getAttribute('data-is-text-element') === 'true';
+    const currentText = controlBox.getAttribute('data-current-text') || '';
+    
+    // Check if content input already exists
+    let contentSection = controlBox.querySelector('#inspector-content-section');
+    
+    if (show && !contentSection && isTextElement) {
+      // Create content input section
+      contentSection = document.createElement('div');
+      contentSection.id = 'inspector-content-section';
+      contentSection.style.cssText = 'margin-bottom: 12px;';
+      
+      contentSection.innerHTML = \`
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;">
+          <label style="font-weight: 500; color: \${theme.textColor}; font-size: 13px;">
+            \${labels.editText}
+          </label>
+        </div>
+        <textarea 
+          id="inspector-text-input"
+          style="width: 100%; padding: 10px 12px; border: 1px solid \${theme.inputBorderColor}; border-radius: 14px; font-size: 14px; color: \${theme.inputTextColor}; background: \${theme.inputBackgroundColor}; 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='\${theme.inputBackgroundColor}'; this.style.borderColor='\${theme.inputBorderColor}';"
+        >\${currentText}</textarea>
+        <div style="margin-top: 8px;">
+          <button 
+            id="inspector-text-submit"
+            style="width: 100%; padding: 10px 16px; background: \${theme.buttonColor}; color: \${theme.buttonTextColor}; border: none; border-radius: 14px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all 0.2s;"
+            onmouseover="this.style.opacity='0.85';"
+            onmouseout="this.style.opacity='1';"
+            title="\${labels.updateText}"
+          >
+            \${labels.updateText}
+          </button>
+        </div>
+        <div style="border-top: 1px solid #e5e7eb; margin-top: 12px; margin-bottom: 12px;"></div>
+      \`;
+      
+      // Insert at the beginning of controlBox
+      const promptSection = controlBox.querySelector('#inspector-prompt-section');
+      controlBox.insertBefore(contentSection, promptSection);
+      
+      // Add event listeners
+      const textInput = contentSection.querySelector('#inspector-text-input');
+      const textSubmit = contentSection.querySelector('#inspector-text-submit');
       
       textSubmit.addEventListener('click', (e) => {
         e.stopPropagation();
         const newText = textInput.value;
         if (window.parent !== window) {
-          window.parent.postMessage({
+          const message = JSON.stringify({
             type: 'INSPECTOR_TEXT_UPDATED',
             data: {
               text: newText,
               originalText: currentText,
-              element: elementData
+              element: selectedElementData
             }
-          }, '*');
+          });
+          window.parent.postMessage(message, '*');
         }
         console.log('Text updated:', newText);
         
@@ -282,7 +317,8 @@ export function inspectorPlugin() {
       });
       
       textInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
           e.stopPropagation();
           textSubmit.click();
         }
@@ -290,19 +326,52 @@ export function inspectorPlugin() {
       
       // Prevent input events from bubbling
       textInput.addEventListener('click', (e) => e.stopPropagation());
+      
+      // Focus text input
+      setTimeout(() => textInput.focus(), 100);
+      
+      // Adjust box height
+      adjustControlBoxPosition();
+    } else if (!show && contentSection) {
+      // Remove content input section
+      contentSection.remove();
+      
+      // Refocus prompt input
+      const promptInput = controlBox.querySelector('#inspector-prompt-input');
+      if (promptInput) {
+        setTimeout(() => promptInput.focus(), 100);
+      }
+      
+      // Adjust box height
+      adjustControlBoxPosition();
     }
+  }
+  
+  // Adjust control box position based on content
+  function adjustControlBoxPosition() {
+    if (!controlBox || !selectedElement) return;
     
-    // Prevent prompt input events from bubbling
-    promptInput.addEventListener('click', (e) => e.stopPropagation());
+    const rect = selectedElement.getBoundingClientRect();
+    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;
     
-    // Close button
-    closeBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      unpauseInspection();
-    });
+    // Get actual box height
+    const boxHeight = controlBox.offsetHeight;
     
-    // Focus prompt input
-    setTimeout(() => promptInput.focus(), 100);
+    // Show above if not enough space below
+    let topPosition;
+    if (spaceBelow < boxHeight + 20 && spaceAbove > spaceBelow) {
+      topPosition = rect.top - boxHeight - 10;
+      controlBox.setAttribute('data-position', 'above');
+    } else {
+      topPosition = rect.bottom + 10;
+      controlBox.setAttribute('data-position', 'below');
+    }
+    
+    controlBox.style.top = topPosition + 'px';
   }
   
   // Pause inspection
@@ -400,8 +469,9 @@ export function inspectorPlugin() {
     
     const rect = element.getBoundingClientRect();
     overlay.style.display = 'block';
-    overlay.style.top = rect.top + window.scrollY + 'px';
-    overlay.style.left = rect.left + window.scrollX + 'px';
+    // position: fixed uses viewport coordinates, no need for scroll offset
+    overlay.style.top = rect.top + 'px';
+    overlay.style.left = rect.left + 'px';
     overlay.style.width = rect.width + 'px';
     overlay.style.height = rect.height + 'px';
   }
@@ -417,10 +487,13 @@ export function inspectorPlugin() {
   function handleMouseMove(e) {
     if (!inspectMode || isPaused) return;
     
-    // Ignore control box and overlay
+    // Ignore control box, overlay, and elements with data-inspector-ignore
     if (e.target.id === 'inspector-control-box' || 
         e.target.closest('#inspector-control-box') ||
-        e.target.id === 'inspector-overlay') {
+        e.target.id === 'inspector-overlay' ||
+        e.target.hasAttribute('data-inspector-ignore') ||
+        e.target.closest('[data-inspector-ignore]')) {
+      clearHighlight();
       return;
     }
     
@@ -428,20 +501,40 @@ export function inspectorPlugin() {
     highlightElement(hoveredElement);
   }
 
+  // Handle scroll - update highlight position
+  function handleScroll() {
+    if (!inspectMode) return;
+    
+    if (isPaused && selectedElement) {
+      // Update overlay for selected element
+      highlightElement(selectedElement);
+      // Update control box position
+      if (controlBox) {
+        adjustControlBoxPosition();
+      }
+    } else if (hoveredElement) {
+      // Update overlay for hovered element
+      highlightElement(hoveredElement);
+    }
+  }
+
   // Handle click
   function handleClick(e) {
     if (!inspectMode) return;
     
-    // Ignore clicks on control box
+    // Ignore clicks on control box and elements with data-inspector-ignore
     if (e.target.id === 'inspector-control-box' || 
-        e.target.closest('#inspector-control-box')) {
+        e.target.closest('#inspector-control-box') ||
+        e.target.hasAttribute('data-inspector-ignore') ||
+        e.target.closest('[data-inspector-ignore]')) {
       return;
     }
     
-    // If already paused, ignore clicks (don't select new element)
+    // If already paused, unpause first then ignore this click
     if (isPaused) {
       e.preventDefault();
       e.stopPropagation();
+      unpauseInspection();
       return;
     }
     
@@ -452,6 +545,10 @@ export function inspectorPlugin() {
     const fiber = getReactFiber(element);
     const componentInfo = fiber ? getComponentInfo(fiber) : null;
     
+    // Check if element is a text node
+    const isTextNode = element.textContent && element.children.length === 0;
+    const textContent = isTextNode ? element.textContent.trim() : '';
+    
     const elementData = {
       tagName: element.tagName,
       className: element.className,
@@ -462,21 +559,27 @@ export function inspectorPlugin() {
         left: element.getBoundingClientRect().left,
         width: element.getBoundingClientRect().width,
         height: element.getBoundingClientRect().height
-      }
+      },
+      isTextNode: isTextNode,
+      textContent: textContent
     };
     
     // Send info to parent window
     if (window.parent !== window) {
-      window.parent.postMessage({
+      // Use JSON.stringify to ensure all properties are serialized correctly
+      const message = JSON.stringify({
         type: 'INSPECTOR_ELEMENT_SELECTED',
         data: elementData
-      }, '*');
+      });
+      window.parent.postMessage(message, '*');
     }
     
     // Log for debugging
     console.log('Element selected:', {
       element,
-      componentInfo
+      componentInfo,
+      isTextNode,
+      textContent
     });
     
     // Pause inspection and show control box
@@ -492,6 +595,7 @@ export function inspectorPlugin() {
       document.body.style.cursor = 'crosshair';
       document.addEventListener('mousemove', handleMouseMove, true);
       document.addEventListener('click', handleClick, true);
+      document.addEventListener('scroll', handleScroll, true);
     } else {
       // Clean up everything
       clearHighlight();
@@ -499,6 +603,7 @@ export function inspectorPlugin() {
       document.body.style.cursor = '';
       document.removeEventListener('mousemove', handleMouseMove, true);
       document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('scroll', handleScroll, true);
     }
   }
 
@@ -511,6 +616,13 @@ export function inspectorPlugin() {
       if (event.data.labels) {
         labels = { ...labels, ...event.data.labels };
       }
+      
+      // Update theme if provided
+      if (event.data.theme) {
+        theme = { ...theme, ...event.data.theme };
+      }
+    } else if (event.data.type === 'SHOW_CONTENT_INPUT') {
+      toggleContentInput(event.data.show);
     }
   });
 
@@ -523,7 +635,7 @@ export function inspectorPlugin() {
       lastUrl = newUrl;
       
       if (window.parent !== window) {
-        window.parent.postMessage({
+        const message = JSON.stringify({
           type: 'URL_CHANGED',
           data: {
             url: newUrl,
@@ -531,7 +643,8 @@ export function inspectorPlugin() {
             search: location.search,
             hash: location.hash
           }
-        }, '*');
+        });
+        window.parent.postMessage(message, '*');
       }
     }
   }
@@ -564,10 +677,11 @@ export function inspectorPlugin() {
   
   function sendError(errorData) {
     if (window.parent !== window) {
-      window.parent.postMessage({
+      const message = JSON.stringify({
         type: 'INSPECTOR_ERROR',
         data: errorData
-      }, '*');
+      });
+      window.parent.postMessage(message, '*');
     }
     // Use original console.error to avoid infinite loop
     originalConsoleError.call(console, '🔍 Inspector Error:', errorData);

package/dist/types.d.ts

@@ -1,5 +1,8 @@
 /**
- * Shared types for @promake/inspector
+ * Shared types for @promakeai/inspector
+ *
+ * Bu dosya inspector için kullanılan tüm type'ları içerir.
+ * Hook ve plugin arasında paylaşılan type'lar burada tanımlanır.
  */
 export interface ComponentInfo {
     componentName: string;
@@ -19,6 +22,8 @@ export interface SelectedElementData {
     id: string;
     component: ComponentInfo | null;
     position: ElementPosition;
+    isTextNode?: boolean;
+    textContent?: string;
 }
 export interface UrlChangeData {
     url: string;
@@ -50,6 +55,18 @@ export interface InspectorLabels {
     updateText?: string;
     promptPlaceholder?: string;
 }
+export interface InspectorTheme {
+    backgroundColor?: string;
+    textColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    inputBackgroundColor?: string;
+    inputTextColor?: string;
+    inputBorderColor?: string;
+}
+export interface ContentInputRequestData {
+    show: boolean;
+}
 export interface InspectorCallbacks {
     onElementSelected?: (data: SelectedElementData) => void;
     onUrlChange?: (data: UrlChangeData) => void;
@@ -62,5 +79,6 @@ export interface UseInspectorReturn {
     toggleInspector: (active?: boolean) => void;
     startInspecting: () => void;
     stopInspecting: () => void;
+    showContentInput: (show: boolean) => void;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -1,4 +1,7 @@
 /**
- * Shared types for @promake/inspector
+ * Shared types for @promakeai/inspector
+ *
+ * Bu dosya inspector için kullanılan tüm type'ları içerir.
+ * Hook ve plugin arasında paylaşılan type'lar burada tanımlanır.
  */
 export {};

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@promakeai/inspector",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Visual element inspector for React apps in iframe with AI prompt support",
   "author": "Promake",
+  "license": "MIT",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/promakeai/inspector.git"
+  },
+  "bugs": {
+    "url": "https://github.com/promakeai/inspector/issues"
+  },
+  "homepage": "https://github.com/promakeai/inspector#readme",
   "main": "./dist/hook.js",
   "module": "./dist/hook.js",
   "types": "./dist/hook.d.ts",
@@ -24,7 +33,8 @@
   ],
   "scripts": {
     "build": "tsc && tsc -p tsconfig.plugin.json",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "release": "npm run build && npm publish --access public"
   },
   "keywords": [
     "vite",
@@ -38,8 +48,8 @@
     "prompt"
   ],
   "peerDependencies": {
-    "react": "^18.0.0",
-    "vite": "^5.0.0"
+    "react": ">18.0.0",
+    "vite": ">5.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",